地址欄輸入URL以後到底發生了哪些事情

地址欄輸入URL以後到底發生了哪些事情？

這個問題應該是前端面試中被問機率較大的知識點，綜合考察了面試者對於瀏覽器，計算機網絡，HTTP協議，服務器等的基礎。本人學生黨一枚，近期找工做的過程當中也被問了兩次，以前回答都是參考前人的總結，前端時間用Navigation Timing draft實現了埋點統計頁面加載時間，發現能夠從另外一個角度詳解頁面加載的過程。

Navigation Timing API是在HTML 5中新增一個可被用於準確測試頁面性能的API，該API提供一種簡單的獲取頁面被導航或被加載時的時間及相關信息的方法。目前爲止，在Internet Explorer 九、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鏈接

上面就是整個請求淘寶頁面到全部數據（同步異步）接收完成並渲染的整個過程。我能想到的點只有這些，若有錯誤，懇請你們指出，也歡迎補充！