資訊專欄INFORMATION COLUMN
摘要：此時樹，樹建好，并渲染完成異步請求開始若有斷開每個長連接都會有一定時限，當請求完成之后，斷開連接上面就是整個請求淘寶頁面到所有數據同步異步接收完成并渲染的整個過程。
地址欄輸入URL之后到底發生了哪些事情？
這個問題應該是前端面試中被問概率較大的知識點，綜合考察了面試者對于瀏覽器，計算機網絡，HTTP協議，服務器等的基礎。本人學生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考前人的總結，前端時間用Navigation Timing draft實現了埋點統計頁面加載時間，發現可以從另一個角度詳解頁面加載的過程。
Navigation Timing API是在HTML 5中新增一個可被用于準確測試頁面性能的API，該API提供一種簡單的獲取頁面被導航或被加載時的時間及相關信息的方法。目前為止，在Internet Explorer 9、Google Chrome以及Firefox nightly Builds瀏覽器中對該API提供支持，目前處于草案中。
下圖為發起頁面請求時所經歷的過程：
下面我們以上圖為時間軸，以淘寶為例，說說地址欄輸入URL之后發生了哪些事情
1 用戶在URL欄輸入 baidu.com（便于說明重定向，采用移動端訪問）
2 navigationStart：準備開始請求新頁面
3 redirectStart~redirectEnd：頁面重定向
由于地址欄輸入的是taobao.com
經過302重定向到http://www.taobao.com/,
再經過307重定向到https://www.taobao.com/,
再進過302重定向到http://m.taobao.com/?sprefer=...
最后經過307重定向到https://m.taobao.com/?sprefer...
即，經過四次重定向最終訪問移動版淘寶首頁
注意，每個重定向都是在建立各自TCP/IP之后才請求的。也就是說上述重定向每次都經過DNS->TCP/IP->REQUEST->RESPONSE
最后URL為：https://m.taobao.com/?sprefer...接著到5
4 fetchStart~domainLookupStart：檢查緩存
此時，若該資源（https://m.taobao.com/?sprefer...）命中強緩存（Expires/Cache-control），則直接讀取緩存，不再發起網絡請求，到9。
有關緩存參考上一篇文章說說web緩存
由于http://m.taobao.com/?sprefer=...未命中緩存，接著到5
5 domainLookupStart~domainLookupEnd：檢查DNS
若因為任何原因沒有去檢查DNS（即瀏覽器使用了緩存，持久連接，或者本地資源）而無需檢查DNS，該步跳過，到6。否則在檢查本地網絡的DNS服務器，找到服務器IP。
6 connectStart~connectEnd:建立TCP/IP三次握手連接
若為HTTPS，多一個secureConnection,即SSL協議握手過程。此后每次通信都多加解密過程。
7 RequestStart~RequestEnd:服務器處理數據，并返回。
此時，若命中協商緩存，返回304，且不帶內容實體。若未命中，返回內容實體。
8 responseStart~responseEnd:瀏覽器接收數據（先接收頭部，再內容）
9 卸載當前頁面（如有的話）
10 domLoading：加載HTML,并從上到下解析HTML,構建DOM樹,Render樹,回流,重繪。若遇到需要加載的資源，若JS,CSS,圖片等，暫停解析，請求資源。
由于HTTP/1.1中使用長連接keep-connection:active,此時可直接發起多個后續請求，無需重新建立TCP/IP，如下圖，都是在同一主機下的資源。
11 若需要加載的資源和當前頁面不是在同一個域名下，需要重新從3~8獲取資源。瀏覽器可以并發請求多個資源，即同時建立多個TCP/IP，一般同個域名下IE67為2個，其他為6個。
12 若需要加載的資源位于CDN服務器上，則在DNS解析中，找到最近的CDN服務器節點，并一級依次找到多級緩存服務器（如有），并解析出真實IP地址。
以一下資源為例，存在于CDN服務器中，并經過多個緩存服務器，最終獲取資源。此時，若緩存服務器未過期，則將直接返回緩存服務器的HTML。若已過期，各級緩存服務器將請求源服務器的資源，本地備份并返回給瀏覽器。
13 domInteractive：文檔解析完成的時刻
14 domContentLoadedEventStart~domContentLoadedEventEnd：
當DOMContentLoaded事件觸發之前，瀏覽器完成所有script（包括設置了defer屬性但未設置async屬性的script）的下載和解析之后的時刻。
15 domComplete：document.readyState屬性設置為"complete"。此時DOM樹，Render樹建好，并渲染完成
16 異步請求開始（若有）
17 TCP/IP斷開：每個長連接都會有一定時限，當請求完成之后，斷開TCP/IP連接
上面就是整個請求淘寶頁面到所有數據（同步異步）接收完成并渲染的整個過程。我能想到的點只有這些，如有錯誤，懇請大家指出，也歡迎補充！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111474.html
摘要：此時樹，樹建好，并渲染完成異步請求開始若有斷開每個長連接都會有一定時限，當請求完成之后，斷開連接上面就是整個請求淘寶頁面到所有數據同步異步接收完成并渲染的整個過程。 地址欄輸入URL之后到底發生了哪些事情？ 這個問題應該是前端面試中被問概率較大的知識點，綜合考察了面試者對于瀏覽器，計算機網絡，HTTP協議，服務器等的基礎。本人學生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...
摘要：此時樹，樹建好，并渲染完成異步請求開始若有斷開每個長連接都會有一定時限，當請求完成之后，斷開連接上面就是整個請求淘寶頁面到所有數據同步異步接收完成并渲染的整個過程。 地址欄輸入URL之后到底發生了哪些事情？ 這個問題應該是前端面試中被問概率較大的知識點，綜合考察了面試者對于瀏覽器，計算機網絡，HTTP協議，服務器等的基礎。本人學生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...
摘要：此時樹，樹建好，并渲染完成異步請求開始若有斷開每個長連接都會有一定時限，當請求完成之后，斷開連接上面就是整個請求淘寶頁面到所有數據同步異步接收完成并渲染的整個過程。 地址欄輸入URL之后到底發生了哪些事情？ 這個問題應該是前端面試中被問概率較大的知識點，綜合考察了面試者對于瀏覽器，計算機網絡，HTTP協議，服務器等的基礎。本人學生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...
摘要：比如對于的，瀏覽器實際上不知道到底是什么東西，需要查找網站所在服務器的地址，才能找到目標，這就是下文要說的域名解析。二域名解析當用戶在瀏覽器中輸入后你使用的電腦會發出一個請求到本地服務器。 showImg(https://segmentfault.com/img/remote/1460000009317499?w=700&h=466); 這里markdown格式跟簡書不太一樣，排版可能...
閱讀 1981·2021-11-24 09:38
閱讀 3343·2021-11-22 12:07
閱讀 1909·2021-09-22 16:03
閱讀 1966·2021-09-02 15:41
閱讀 2625·2021-07-24 23:28
閱讀 2218·2019-08-29 13:17
閱讀 1556·2019-08-29 12:25
閱讀 2671·2019-08-29 11:10
