地址欄輸入URL之后到底發(fā)生了哪些事情

calx 發(fā)布于2019-08-01 15:40 / 1936人閱讀

摘要：此時樹，樹建好，并渲染完成異步請求開始若有斷開每個長連接都會有一定時限，當(dāng)請求完成之后，斷開連接上面就是整個請求淘寶頁面到所有數(shù)據(jù)同步異步接收完成并渲染的整個過程。

地址欄輸入URL之后到底發(fā)生了哪些事情？

這個問題應(yīng)該是前端面試中被問概率較大的知識點，綜合考察了面試者對于瀏覽器，計算機網(wǎng)絡(luò)，HTTP協(xié)議，服務(wù)器等的基礎(chǔ)。本人學(xué)生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考前人的總結(jié)，前端時間用Navigation Timing draft實現(xiàn)了埋點統(tǒng)計頁面加載時間，發(fā)現(xiàn)可以從另一個角度詳解頁面加載的過程。

Navigation Timing API是在HTML 5中新增一個可被用于準(zhǔn)確測試頁面性能的API，該API提供一種簡單的獲取頁面被導(dǎo)航或被加載時的時間及相關(guān)信息的方法。目前為止，在Internet Explorer 9、Google Chrome以及Firefox nightly Builds瀏覽器中對該API提供支持，目前處于草案中。

下圖為發(fā)起頁面請求時所經(jīng)歷的過程：

下面我們以上圖為時間軸，以淘寶為例，說說地址欄輸入URL之后發(fā)生了哪些事情

1 用戶在URL欄輸入 baidu.com（便于說明重定向，采用移動端訪問）
2 navigationStart：準(zhǔn)備開始請求新頁面
3 redirectStart~redirectEnd：頁面重定向
由于地址欄輸入的是taobao.com
經(jīng)過302重定向到http://www.taobao.com/,
再經(jīng)過307重定向到https://www.taobao.com/,
再進過302重定向到http://m.taobao.com/?sprefer=...
最后經(jīng)過307重定向到https://m.taobao.com/?sprefer...
即，經(jīng)過四次重定向最終訪問移動版淘寶首頁
注意，每個重定向都是在建立各自TCP/IP之后才請求的。也就是說上述重定向每次都經(jīng)過DNS->TCP/IP->REQUEST->RESPONSE

最后URL為：https://m.taobao.com/?sprefer...接著到5
4 fetchStart~domainLookupStart：檢查緩存
此時，若該資源（https://m.taobao.com/?sprefer...）命中強緩存（Expires/Cache-control），則直接讀取緩存，不再發(fā)起網(wǎng)絡(luò)請求，到9。
有關(guān)緩存參考上一篇文章說說web緩存
由于http://m.taobao.com/?sprefer=...未命中緩存，接著到5
5 domainLookupStart~domainLookupEnd：檢查DNS
若因為任何原因沒有去檢查DNS（即瀏覽器使用了緩存，持久連接，或者本地資源）而無需檢查DNS，該步跳過，到6。否則在檢查本地網(wǎng)絡(luò)的DNS服務(wù)器，找到服務(wù)器IP。
6 connectStart~connectEnd:建立TCP/IP三次握手連接
若為HTTPS，多一個secureConnection,即SSL協(xié)議握手過程。此后每次通信都多加解密過程。

7 RequestStart~RequestEnd:服務(wù)器處理數(shù)據(jù)，并返回。
此時，若命中協(xié)商緩存，返回304，且不帶內(nèi)容實體。若未命中，返回內(nèi)容實體。
8 responseStart~responseEnd:瀏覽器接收數(shù)據(jù)（先接收頭部，再內(nèi)容）
9 卸載當(dāng)前頁面（如有的話）
10 domLoading：加載HTML,并從上到下解析HTML,構(gòu)建DOM樹,Render樹,回流,重繪。若遇到需要加載的資源，若JS,CSS,圖片等，暫停解析，請求資源。
由于HTTP/1.1中使用長連接keep-connection:active,此時可直接發(fā)起多個后續(xù)請求，無需重新建立TCP/IP，如下圖，都是在同一主機下的資源。

11 若需要加載的資源和當(dāng)前頁面不是在同一個域名下，需要重新從3~8獲取資源。瀏覽器可以并發(fā)請求多個資源，即同時建立多個TCP/IP，一般同個域名下IE67為2個，其他為6個。
12 若需要加載的資源位于CDN服務(wù)器上，則在DNS解析中，找到最近的CDN服務(wù)器節(jié)點，并一級依次找到多級緩存服務(wù)器（如有），并解析出真實IP地址。
以一下資源為例，存在于CDN服務(wù)器中，并經(jīng)過多個緩存服務(wù)器，最終獲取資源。此時，若緩存服務(wù)器未過期，則將直接返回緩存服務(wù)器的HTML。若已過期，各級緩存服務(wù)器將請求源服務(wù)器的資源，本地備份并返回給瀏覽器。

13 domInteractive：文檔解析完成的時刻
14 domContentLoadedEventStart~domContentLoadedEventEnd：
當(dāng)DOMContentLoaded事件觸發(fā)之前，瀏覽器完成所有script（包括設(shè)置了defer屬性但未設(shè)置async屬性的script）的下載和解析之后的時刻。
15 domComplete：document.readyState屬性設(shè)置為"complete"。此時DOM樹，Render樹建好，并渲染完成
16 異步請求開始（若有）
17 TCP/IP斷開：每個長連接都會有一定時限，當(dāng)請求完成之后，斷開TCP/IP連接