前端筆記（10）浏覽器導航流程

在浏覽器裡，從輸入 URL 到頁面展示，這中間發生了什麼？

此處以chrome浏覽器為例進行說明。

首先先介紹幾個多程序浏覽器裡的基本概念。

• 浏覽器程序：主要負責使用者互動、子程序管理和檔案儲存等功能
• 網絡程序：面向渲染程序和浏覽器程序等提供網絡下載下傳功能
• 渲染程序：渲染程序的主要職責是把從網絡下載下傳的 HTML、JavaScript、CSS、圖檔等資源解析為可以顯示和互動的頁面。因為渲染程序所有的内容都是通過網絡擷取的，會存在一些惡意代碼利用浏覽器漏洞對系統進行攻擊，是以運作在渲染程序裡面的代碼是不被信任的。這也是為什麼 Chrome 會讓渲染程序運作在安全沙箱裡，就是為了保證系統的安全

從輸入 URL 到頁面展示

1. 使用者輸入

當使用者在位址欄中輸入一個查詢關鍵字時，位址欄會判斷輸入的關鍵字是搜尋内容，還是請求的 URL。

• 如果是搜尋内容，位址欄會使用浏覽器預設的搜尋引擎，來合成新的帶搜尋關鍵字的 URL。
• 如果判斷輸入内容符合 URL 規則，那麼位址欄會根據規則，把這段内容加上協定，合成為完整的 URL。

當使用者輸入關鍵字并鍵入回車之後，這意味着目前頁面即将要被替換成新的頁面，不過在這個流程繼續之前，浏覽器還給了目前頁面一次執行 beforeunload 事件的機會，beforeunload 事件允許頁面在退出之前執行一些資料清理操作，還可以詢問使用者是否要離開目前頁面，比如目前頁面可能有未送出完成的表單等情況，是以使用者可以通過 beforeunload 事件來取消導航，讓浏覽器不再執行任何後續工作。

2. URL 請求過程

浏覽器程序會通過程序間通信（IPC）把 URL 請求發送至網絡程序，網絡程序接收到 URL 請求後，會在這裡發起真正的 URL 請求流程。

首先，網絡程序會查找本地緩存是否緩存了該資源。如果有緩存資源，那麼直接傳回資源給浏覽器程序；如果在緩存中沒有查找到資源，那麼直接進入網絡請求流程。

這請求前的第一步是要進行 DNS 解析，以擷取請求域名的伺服器 IP 位址。如果請求協定是 HTTPS，那麼還需要建立 TLS 連接配接。接下來就是利用 IP 位址和伺服器建立 TCP 連接配接。連接配接建立之後，浏覽器端會建構請求行、請求頭等資訊，并把和該域名相關的 Cookie 等資料附加到請求頭中，然後向伺服器發送建構的請求資訊。

伺服器接收到請求資訊後，會根據請求資訊生成響應資料（包括響應行、響應頭和響應體等資訊），并發給網絡程序。等網絡程序接收了響應行和響應頭之後，就開始解析響應頭的内容了。

（1）重定向

在接收到伺服器傳回的響應頭後，網絡程序開始解析響應頭，如果發現傳回的狀态碼是 301 或者 302，那麼說明伺服器需要浏覽器重定向到其他 URL。這時網絡程序會從響應頭的 Location 字段裡面讀取重定向的位址，然後再發起新的 HTTP 或者 HTTPS 請求，一切又重頭開始了。

（2）響應資料類型處理

Content-Type 是 HTTP 頭中一個非常重要的字段， 它告訴浏覽器伺服器傳回的響應體資料是什麼類型，然後浏覽器會根據 Content-Type 的值來決定如何顯示響應體的内容。

不同 Content-Type 的後續處理流程也截然不同。如果 Content-Type 字段的值被浏覽器判斷為下載下傳類型，那麼該請求會被送出給浏覽器的下載下傳管理器，同時該 URL 請求的導航流程就此結束。但如果是 HTML，那麼浏覽器則會繼續進行導航流程。由于 Chrome 的頁面渲染是運作在渲染程序中的，是以接下來就需要準備渲染程序了。

3. 準備渲染程序

預設情況下，Chrome 會為每個頁面配置設定一個渲染程序，也就是說，每打開一個新頁面就會配套建立一個新的渲染程序。但是，也有一些例外，如果從一個頁面打開了另一個新頁面，而新頁面和目前頁面屬于同一站點的話，那麼新頁面會複用父頁面的渲染程序。

渲染程序準備好之後，還不能立即進入文檔解析狀态，因為此時的文檔資料還在網絡程序中，并沒有送出給渲染程序，是以下一步就進入了送出文檔階段。

4. 送出文檔

所謂送出文檔，就是指浏覽器程序将網絡程序接收到的 HTML 資料送出給渲染程序，具體流程是這樣的：

• 首先當浏覽器程序接收到網絡程序的響應頭資料之後，便向渲染程序發起“送出文檔”的消息；
• 渲染程序接收到“送出文檔”的消息後，會和網絡程序建立傳輸資料的“管道”；
• 等文檔資料傳輸完成之後，渲染程序會傳回“确認送出”的消息給浏覽器程序；
• 浏覽器程序在收到“确認送出”的消息後，會更新浏覽器界面狀态，包括了安全狀态、位址欄的 URL、前進後退的曆史狀态，并更新 Web 頁面。

5. 渲染階段

一旦文檔被送出，渲染程序便開始頁面解析和子資源加載了，渲染程序會發送一個消息給浏覽器程序，浏覽器接收到消息後，會停止标簽圖示上的加載動畫。