從輸入 URL 到頁面加載全過程

• 查看瀏覽器緩存

  • 若是資源未緩存，發送請求
  • 若是資源被緩存，檢驗是否足夠新鮮，是的話直接使用，不然發起請求驗證
  • 驗證是否新鮮（強緩存表示在緩存期間不須要請求）
    • expires
    • cache-control

• 解析 URL 得到 協議、主機、端口、路徑

• 組裝 HTTP request 報文

• DNS 查詢

• TCP 握手。應用層下發數據到傳輸層，指明端口號到網絡層，網絡層肯定 IP 地址而後指示數據傳輸要如何跳轉路由器，最後封裝成數據幀到數據鏈路層。

  • A => B (syn=1, seq=N)
  • B => A (syn=1, ack=N+1, seq=Y)
  • A => B (ack=Y+1, seq=Z)

• TLS 握手。

• 發送 HTTP 請求

• 服務端檢驗 HTTP 的緩存頭部(協議緩存)，若是驗證足夠新鮮就返回 304，不然返回其餘

  • ETag 和 If-None-Match 文件指紋，優先級更高
  • Last-Modified 和 If-Modified-Since 本地文件最後修改日期

• 瀏覽器接受請求，根據狀況選擇關閉 TCP 鏈接或者保留複用，斷開鏈接四次握手：

  • A => B
  • B => A
  • B => A
  • A => B

• 檢查 status code

• 若是資源可緩存，進行緩存

• 解碼（Gzip）

• 解析 HTML 文檔

  • 構建 DOM 樹
  • 根據 css 構建 css rule tree
  • 關聯以上構建渲染樹（只包含可見節點）
  • Layout
  • Painting

• 初始的 HTML 被徹底加載和解析後會觸發 DOMContentLoaded 事件(DOM 樹)