一道經(jīng)典面試題：從輸入URL到頁面加載完成經(jīng)歷了那些？當(dāng)然這個問題很多同學(xué)應(yīng)該已經(jīng)看了無數(shù)次，這個問題不僅考察我們對整個鏈路的熟悉程度，它跟性能優(yōu)化也是息息相關(guān)，只有當(dāng)你熟悉了每個細(xì)點的時候，才有可能抓住每個可優(yōu)化的地方。
概述
首先我們簡單列一下主要流程：
- 域名解析，查找域名對應(yīng)的ip地址
- 與服務(wù)器建立連接
- 瀏覽器發(fā)送請求
- 瀏覽器接收響應(yīng)并渲染
- 連接關(guān)閉
域名解析
- 為什么要進行域名解析？
為了更方便的記住網(wǎng)站，會用字母和數(shù)字組合來代替純數(shù)字的 IP 地址，IP 協(xié)議為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配的一個地址，IP地址就想當(dāng)于主機的唯一標(biāo)示，服務(wù)器本質(zhì)也是一臺主機，想要訪問某個服務(wù)器，必須先知道它的 IP 地址。 - 如何查找域名對應(yīng)的IP地址？
- 首先會在瀏覽器緩存中查找，比如在chrome下，可以在瀏覽器中輸入
chrome://net-internals/#dns來查看當(dāng)前的緩存列表，或者清除緩存。 - 操作系統(tǒng)的緩存中查找。
- 本地host配置文件查找（比如有時候我們通過修改host文件來做代理）。
- 路由器DNS緩存查找。
- LDNS（本地域名服務(wù)器）迭代查詢，也就是針對域名一級一級去查詢最終的IP地址。比如訪問a.qq.com，LDNS會先去查找根域名服務(wù)器，它會返回com的授權(quán)服務(wù)器，然后再去查找com的服務(wù)器，他會返回qq.com的授權(quán)服務(wù)器，以此類推，查找到之后做緩存并返回給瀏覽器。
與服務(wù)器建立連接
通過DNS查詢我們已經(jīng)獲取到了服務(wù)器IP，接下來就可以進行TCP連接。TCP是一種面向有連接的傳輸層協(xié)議，它可以保證客戶端和服務(wù)端之間的通信可達(dá)，他能夠處理在傳輸過程中丟包、亂序等異常情況，此外他還能有效利用寬帶，緩解網(wǎng)絡(luò)擁堵。
-
三次握手
三次握手
發(fā)送請求
與服務(wù)器建立連接之后，瀏覽器向服務(wù)器發(fā)起http請求，請求消息包含：請求行、報頭、請求體。
請求行包含了方法、URI、協(xié)議版本，比如：GET http://a.qq.com HTTP/1.1
報頭主要是Header中的信息，這里不做贅述。
請求體包含了要傳給服務(wù)器的信息，常見的比如query參數(shù)。
接收響應(yīng)
- 響應(yīng)消息
響應(yīng)消息也是由三部分構(gòu)成：狀態(tài)行、報頭以及響應(yīng)正文。
狀態(tài)行包含協(xié)議版本、狀態(tài)碼等。
報頭包含普通報頭、請求報頭、響應(yīng)報頭和實體報頭。
響應(yīng)正文就是響應(yīng)的內(nèi)容，比如我們請求一個網(wǎng)站，正文就是這個網(wǎng)站的html。 - http緩存簡述
這里會涉及到另一個經(jīng)典面試題：http緩存。就像DNS解析域名緩存一樣，請求內(nèi)容也會有緩存，簡單總結(jié)就是，如果有緩存并且沒有過期會優(yōu)先使用本地緩存（此時不會發(fā)起http請求），如果緩存過期了，那么服務(wù)端會判斷內(nèi)容是否有變化，如果沒有變化則不反回實體，繼續(xù)使用本地緩存，否則按照正常請求返回內(nèi)容。 - 頁面渲染
接收到響應(yīng)后，瀏覽器首先會解析HTML文檔（為了頁面更快的呈現(xiàn)，這里不會完全解析完才進行下一步），然后構(gòu)建渲染樹（DOM樹、CSSOM樹），再然后開始渲染頁面、顯示內(nèi)容，這里就會涉及到經(jīng)典面試題Reflow和Repaint。當(dāng)然在渲染過程中還可能會繼續(xù)發(fā)起請求（js、css、圖片等）。
斷開連接
這里就是四次揮手
四次揮手
這里大家可能有疑問，既然客戶端都請求斷開了，為什么服務(wù)器不立刻斷開？這是因為有些數(shù)據(jù)可能還在傳輸中，所以要確認(rèn)數(shù)據(jù)全都發(fā)送完畢。
總結(jié)
整個過程基本是以上幾大步驟，當(dāng)然每一步還有更細(xì)節(jié)的內(nèi)容，這里不做展開。當(dāng)你理解了整個過程后，再去做性能優(yōu)化可以起到事半功倍的效果。
