從URL輸入到頁面展現(xiàn)都發(fā)生了什么？
第一步、輸入URL
URL是什么
統(tǒng)一資源定位符（Uniform Resource Locator，縮寫為URL），又叫做網(wǎng)頁地址，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)的資源的地址（Address）。互聯(lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。它最初是由蒂姆·伯納斯-李發(fā)明用來作為萬維網(wǎng)的地址的。現(xiàn)在它已經(jīng)被萬維網(wǎng)聯(lián)盟編制為因特網(wǎng)標(biāo)準(zhǔn)RFC1738了。統(tǒng)一資源定位符的開始，一般會標(biāo)志著一個計算機網(wǎng)絡(luò)所使用的網(wǎng)絡(luò)協(xié)議。
URL的幾個部分
百度完整的URL地址：https://www.baidu.com/link?url=sofXEgyeLzeisB_YfK4BQmywO9kRUuUrCNxYWtf0fI-8sQ1ZtanCPsip2xchhicn&wd=&eqid=e87ea4c90011764d000000065d4fc73f
協(xié)議部分
在該URL中，協(xié)議部分為（https://），這代表該網(wǎng)頁使用的是https協(xié)議。在Internet中可以使用多種協(xié)議。常見的協(xié)議有：” http:// ” （超文本傳輸協(xié)議，信息是明文傳輸）、“ https:// ”（進行加密的網(wǎng)絡(luò)傳輸協(xié)議）、" file:// "（本地文件傳輸協(xié)議，file協(xié)議主要用于訪問本地計算機中的文件）、" ftp:// "（文件傳輸協(xié)議），" mailto: "（資源為電子郵件地址，通過SMTP訪問）。還有一種URL前面沒有加指定協(xié)議，它是指獲取該資源需要使用的協(xié)議與當(dāng)前的URL是保持一致的。
域名部分
用來確定服務(wù)器在互聯(lián)網(wǎng)上的位置，域名的目的是便于記憶和溝通的一組服務(wù)器的地址，是唯一不可重復(fù)的。
域名一般也分三個級別域名
一級域名（頂級域名）：比如.com .cn 二級域名：http://baidu.com http://qq.com 三級域名：http://www.baidu.comhttp://www.qq.com 例子中http://www.baidu.com是二級域名 .com 供商用的國際域名 .cn 供商用的中文域名 .net 用于網(wǎng)絡(luò)供應(yīng)服務(wù)商（系統(tǒng)類的經(jīng)常使用net域名） .org 用于官方組織 .edu 用于教育院校 .gov 用于政府機構(gòu) .io 是(British Indian Ocean Territory)英屬印度洋領(lǐng)地的簡寫 ...
端口號
用來區(qū)分同一臺服務(wù)器上不同服務(wù)的標(biāo)識（基于web服務(wù)管理創(chuàng)建服務(wù)的時候可以指定），不同服務(wù)之間一般是不能使用相同的端口號的。 HTTP => 默認(rèn)端口號80 HTTPS => 默認(rèn)端口號443 FTP => 默認(rèn)端口號21 如果當(dāng)前網(wǎng)絡(luò)服務(wù)，采用的是協(xié)議對應(yīng)的默認(rèn)端口管理，那么當(dāng)用戶輸入網(wǎng)址的時候可以不指定端口號，瀏覽器會默認(rèn)幫用戶把默認(rèn)的端口傳遞給服務(wù)器。（開發(fā)者在服務(wù)器上發(fā)布服務(wù)的時候需要指定端口） 一臺服務(wù)器上的端口號范圍：0~65535之間 webstorm預(yù)覽頁面：http://localhost:63342/QQMusicWebApp.html/ webstorm預(yù)覽頁面：webstorm把自己的電腦當(dāng)做服務(wù)器，在服務(wù)器上創(chuàng)建一個服務(wù)，端口號是63342，自己電腦上的瀏覽器預(yù)覽自己電腦上的服務(wù)，屬于本機服務(wù)請求，用localhost（127.0.0.1）本地域名即可。 服務(wù)器上安裝一款應(yīng)用都可能會作為一個服務(wù)，占用一個端口號。
問號傳參及哈希值
?xx=xxx這是問號傳參，在HTTP事務(wù)中，問號傳參是客戶端把信息傳遞給服務(wù)器的一種方式（也有可能是跳轉(zhuǎn)到某一個頁面，把參數(shù)值傳遞給頁面用來標(biāo)識的）。 #xxx這是哈希值，哈希值一般都是跟用戶端服務(wù)器交互沒啥關(guān)系，主要用于頁面中的錨點定位和HASH路由切換。
第二步、域名解析
DNS是什么
域名系統(tǒng)（Domain Name System縮寫DNS，Domain Name被譯為域名）是因特網(wǎng)的一項核心服務(wù)，它作為可以將域名和IP地址相互映射的一個分布式數(shù)據(jù)庫，能夠使人更方便的訪問互聯(lián)網(wǎng)，而不用去記住能夠被機器直接讀取的IP數(shù)串。DNS系統(tǒng)是為解析域名為 IP 地址而存在的。
IP
IP 網(wǎng)絡(luò)協(xié)議（英語：Internet Protocol）。
IP分為內(nèi)網(wǎng)和外網(wǎng)。
內(nèi)網(wǎng)（也稱局域網(wǎng)），是幾臺或者幾十臺電腦之間互相連接用于資源共享的網(wǎng)絡(luò)，家庭、單位所使用的網(wǎng)絡(luò)一般都是內(nèi)網(wǎng)。內(nèi)網(wǎng)中的設(shè)備使用內(nèi)網(wǎng) IP，一般來說這個 IP 的格式都是 http://192.168.xxx.xxx。
外網(wǎng)（也稱廣域網(wǎng)），在單位、家庭之外有覆蓋范圍極大的網(wǎng)絡(luò)，比如internet，這個大網(wǎng)絡(luò)延伸到了我們的單位、家庭（通過光纖、網(wǎng)線、電話線等）。我們把自己的局域網(wǎng)連接到internet上，那么我們的訪問范圍就從局域網(wǎng)擴展到了整個internet。這時候，就說局域網(wǎng)是內(nèi)網(wǎng)，internet是外網(wǎng)。
內(nèi)網(wǎng)和外網(wǎng)就像兩個隔絕的空間，無法互通，唯一的聯(lián)通點就是路由器（因為路由器既有外網(wǎng) IP 也有內(nèi)網(wǎng) IP），所以路由器有時候也被叫做網(wǎng)關(guān)。
每個處于互聯(lián)網(wǎng)的機器都有IP地址，比如192.168.0.1，127.0.0.1代表著本機的IP地址。
域名解析的流程
- 瀏覽器緩沖—瀏覽器會緩存DNS記錄一段時間系統(tǒng)緩存—從Hosts文件查找是否有該域名和對應(yīng)IP路由器緩沖—一般路由器也會緩存域名信息ISP DNS緩存—比如到電信的DNS上查找緩存如果都沒有找到，則向根域名服務(wù)器查找域名對應(yīng)IP，根域名服務(wù)器把請求轉(zhuǎn)發(fā)到下一級，直到找到IP
第三步、服務(wù)器處理
服務(wù)器是一臺安裝系統(tǒng)的機器，系統(tǒng)里安裝的處理請求的應(yīng)用叫Web server
常見的web服務(wù)器有Apache、Nginx、IIS、Lighttpd
web服務(wù)器接收用戶的Request交給網(wǎng)站代碼，或者接收請求方向代理到其他web服務(wù)器
第四步、網(wǎng)站處理流程
MVC模型（model）—視圖（view）—控制器（controller）
第五步、瀏覽器處理
- HTML字符串被瀏覽器接受后被一句句讀取解析解析到link標(biāo)簽后重新發(fā)送請求獲取css解析到script標(biāo)簽后發(fā)送請求獲取JS，并執(zhí)行代碼解析到img標(biāo)簽后發(fā)送請求獲取圖片資源
第六步、繪制網(wǎng)頁
瀏覽器根據(jù)HTML和CSS計算得到渲染樹，繪制到屏幕上，JS會被執(zhí)行。
