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

op_yolo發表於2019-04-19

  • 檢視瀏覽器快取

    • 如果資源未快取，傳送請求
    • 如果資源被快取，檢驗是否足夠新鮮，是的話直接使用，否則發起請求驗證
    • 驗證是否新鮮（強快取表示在快取期間不需要請求）
      • 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 樹)

相關文章