導航的運作方式
這是網誌系列文章 (共 4 集) 的第 2 部分，旨在探討 Chrome 的內部運作情形。 在上一篇文章中，我們探討了 處理程序和執行緒會處理瀏覽器的不同部分。本文將深入探討 每個程序和執行緒都必須通訊以顯示網站。
我們來看看網路瀏覽的簡單用法：在瀏覽器中輸入網址，然後在瀏覽器中輸入網址 會從網際網路擷取資料，並顯示網頁。這篇文章會將重點放在 使用者要求網站後，瀏覽器就會準備轉譯網頁 (又稱為導覽)。
首先是透過瀏覽器程序
本課程介紹的 第 1 部分：CPU、GPU、記憶體和多程序架構， 分頁以外的所有項目都是由瀏覽器程序處理。 瀏覽器程序擁有類似 UI 執行緒的執行緒，可繪製不同應用程式的按鈕和輸入欄位 瀏覽器、網路執行緒，這個網路執行緒會處理網路堆疊，以接收網際網路的資料。 控管檔案存取權的儲存空間執行緒在網址中輸入網址時 長條，輸入內容會由瀏覽器程序的 UI 執行緒處理。
簡易導覽
步驟 1：處理輸入內容
當使用者開始在網址列中輸入內容時，UI 執行緒會先詢問「這是 搜尋查詢或網址？」Chrome 的網址列也是搜尋輸入欄位，因此 UI 執行緒 需要剖析並決定是否將您帶往搜尋引擎或您要求的網站。
步驟 2：開始導航
當使用者按下進入，UI 執行緒就會啟動網路呼叫，以取得網站內容。載入旋轉圖示 標籤，且網路執行緒會通過適當的通訊協定，例如 針對要求進行 DNS 查詢並建立 TLS 連線。
此時，網路執行緒可能會收到伺服器重新導向標頭，例如 HTTP 301。在此情況下 網路執行緒與 UI 執行緒通訊，表明伺服器正在要求重新導向。接著： 便會啟動另一個網址要求。
步驟 3：閱讀回覆
回應主體 (酬載) 開始進入後，網路執行緒會查看前幾個位元組 串流。回應的 Content-Type 標頭應包含資料類型、 但因為可能遺漏或有誤 MIME 類型探查 就在這裡這是「虛線商家」做為原始碼中的註解。 您可以參考註解，瞭解不同的瀏覽器如何處理內容類型/酬載組合。
如果回應是 HTML 檔案，下一步就是將資料傳送至轉譯器 如果是 ZIP 檔案或其他檔案，就表示這是下載要求 就需要傳送資料給下載管理員
「安全瀏覽」SafeBrowsing檢查也會發生在這裡。 如果網域和回應資料似乎與已知的惡意網站相符，則表示網路執行緒 警示頁面此外， 天合 (CORB) 為了確保敏感的跨網站 資料不會提供給轉譯器程序
步驟 4：找出轉譯器程序
完成所有檢查且網路執行緒確定瀏覽器應前往 網路執行緒會通知 UI 執行緒資料已備妥。UI 執行緒會找出 轉譯器程序就能順利轉譯網頁。
由於網路要求可能需要數百毫秒才能傳回回應， 以加快這項程序UI 執行緒傳送網址要求至 網路執行緒，就會知道使用者正在前往哪個網站。UI 執行緒 會同時嘗試主動尋找或啟動轉譯器程序與網路要求。如此一來 如果所有作業都如預期運作，則網路執行緒時，轉譯器程序已處於待命位置 接收的資料。如果瀏覽重新導向跨網站、從 則可能需要不同的程序
步驟 5：修訂導覽
現在資料和轉譯器程序準備就緒後，就會將處理序間通訊 (IPC) 從瀏覽器程序傳送至 轉譯器程序來修訂導覽也會傳遞資料串流 程序仍可繼續接收 HTML 資料。瀏覽器程序聽到確認修訂版本後 在轉譯器程序中執行時，瀏覽作業已完成，文件載入階段 。
此時網址列已更新，安全性指標和網站設定 UI 也會反映 驗證新網頁上的網站資訊系統會更新該分頁的工作階段記錄，以便回溯/返回 按鈕則可一一瀏覽剛才瀏覽的網站。促進分頁/工作階段還原作業 當你關閉分頁或視窗時，工作階段記錄會儲存在磁碟中。
額外步驟：初始載入完成
修訂導覽後，轉譯器程序會執行載入資源並呈現
頁面。我們會在下一篇文章中詳細說明這個階段的情況。轉譯器
處理「結束」轉譯後，就會將處理序間通訊 (IPC) 傳回瀏覽器處理程序 (剩下所有
頁面中的所有影格已觸發 onload 事件，且執行完畢)。到目前為止
UI 執行緒會停止分頁上的載入旋轉圖示。
我說「完成」，因為用戶端 JavaScript 還是能載入 額外資源並算繪新的檢視畫面。
前往其他網站
簡單的導覽流程已完成！不過，如果使用者在網址列輸入不同網址，會發生什麼情況？
？瀏覽器程序同樣可以執行相同步驟，前往其他網站。
但在執行這項動作之前，必須先與目前顯示的網站確認，
beforeunload 事件。
「beforeunload」可以建立「離開這個網站嗎？」並在您嘗試離開或關閉分頁時顯示快訊。
分頁中的所有內容 (包括 JavaScript 程式碼) 都會由轉譯器程序處理，因此
新的瀏覽要求送達時，瀏覽器程序必須確認目前的轉譯器程序。
如果導覽是透過轉譯器程序啟動 (例如使用者點擊連結或
用戶端 JavaScript 會執行 window.location = "https://newsite.com") 轉譯器程序
會先檢查 beforeunload 處理常式。接著，其程序與瀏覽器程序相同
啟動的導航。唯一的差別在於導航要求會從
轉移到瀏覽器程序的過程。
如果新的導覽頁面不是目前顯示的網站，系統會另外算繪
會呼叫 來處理新的導覽，而目前的算繪程序會保留下來
處理 unload 等事件。詳情請參閱頁面生命週期狀態總覽。
以及如何利用
Page Lifecycle API：
如果是 Service Worker
這個導覽程序最近做了一項調整： service Worker。Service Worker 是一種 應用程式程式碼中的網路 Proxy讓網頁程式開發人員更能掌控 快取本機快取資料，以及何時從網路取得新資料。如果 Service Worker 已設為載入網頁 就不需要從網路中要求資料。
重要的是，Service Worker 是在轉譯器中執行的 JavaScript 程式碼 上傳資料集之後，您可以運用 AutoML 自動完成部分資料準備工作然而，當瀏覽器程序收到瀏覽要求時，瀏覽器程序如何得知網站具有 是？
註冊 Service Worker 後，Service Worker 的範圍會保留為參照 (您可以在此 The Service Worker 生命週期一文)。 導覽發生時，網路執行緒會將網域與已註冊的 Service Worker 進行檢查 如果已為該網址註冊 Service Worker，UI 執行緒會尋找轉譯器程序， 來執行 Service Worker 程式碼Service Worker 可能會從快取載入資料，因此 要求從網路要求資料，或者也可能從網路要求新的資源。
導覽預先載入
您可以看到瀏覽器程序和轉譯器程序之間的來回行程可能會造成延遲。 。 Navigation 預先載入機制可加快 平行載入資源以同時載入 Service Worker。 並以 標頭標示這些要求，讓伺服器決定為 這些要求；例如更新資料而非完整文件
總結
在這篇文章中，我們說明瞭瀏覽期間發生的情況，以及網頁應用程式程式碼的方式。 做為回應標頭，以及用戶端 JavaScript 與瀏覽器互動。瞭解步驟瀏覽器 就會進入網路中。 在下一篇文章，我們將進一步說明瀏覽器如何評估 轉譯網頁時所需的 HTML/CSS/JavaScript。
你喜歡這則貼文嗎？如果您對日後貼文有任何疑問或建議，歡迎我 可以在下方留言區或 @kosamari Twitter 上找到你的留言。