從輸入 URL 到頁面加載完成的過程

這是一個很經典的面試題，在這題中可以将本文講得内容都串聯起來。

1、首先做 DNS 查詢，如果這一步做了智能 DNS 解析的話，會提供通路速度最快的 IP 位址回來

2、接下來是 TCP 握手，應用層會下發資料給傳輸層，這裡 TCP 協定會指明兩端的端口号，然後下發給網絡層。網絡層中的 IP 協定會确定 IP 位址，并且訓示了資料傳輸中如何跳轉路由器。然後包會再被封裝到資料鍊路層的資料幀結構中，最後就是實體層面的傳輸了

3、TCP 握手結束後會進行 TLS 握手，然後就開始正式的傳輸資料

4、資料在進入服務端之前，可能還會先經過負責負載均衡的伺服器，它的作用就是将請求合理的分發到多台伺服器上，這時假設服務端會響應一個 HTML 檔案

5、首先浏覽器會判斷狀态碼是什麼，如果是 200 那就繼續解析，如果 400 或 500 的話就會報錯，如果 300 的話會進行重定向，這裡會有個重定向計數器，避免過多次的重定向，超過次數也會報錯

6、浏覽器開始解析檔案，如果是 gzip 格式的話會先解壓一下，然後通過檔案的編碼格式知道該如何去解碼檔案

7、檔案解碼成功後會正式開始渲染流程，先會根據 HTML 建構 DOM 樹，有 CSS 的話會去建構 CSSOM 樹。如果遇到 script 标簽的話，會判斷是否存在 async 或者 defer ，前者會并行進行下載下傳并執行 JS，後者會先下載下傳檔案，然後等待 HTML 解析完成後順序執行，如果以上都沒有，就會阻塞住渲染流程直到 JS 執行完畢。遇到檔案下載下傳的會去下載下傳檔案，這裡如果使用 HTTP 2.0 協定的話會極大的提高多圖的下載下傳效率。

8、初始的 HTML 被完全加載和解析後會觸發 DOMContentLoaded 事件

9、CSSOM 樹和 DOM 樹建構完成後會開始生成 Render 樹，這一步就是确定頁面元素的布局、樣式等等諸多方面的東西

10、在生成 Render 樹的過程中，浏覽器就開始調用 GPU 繪制，合成圖層，将内容顯示在螢幕上了