從幾個問題開始#
- 使用者在地址欄輸入 URL 後，瀏覽器導航到網頁的流程是怎樣的
- 渲染器進程的核心工作是什麼？它如何將 HTML、CSS 和 JavaScript 轉化為可視網頁
- 作為一名 Web 開發者，有哪些工具和實踐可以幫助我優化網頁性能
多進程架構#
操作系統之上的操作系統
Mermaid Loading...
各個進程的作用#
瀏覽器進程#
- 核心協調者：瀏覽器進程是應用程序的 “指揮中心”，負責協調其他進程，處理標籤頁以外的所有瀏覽器事務。
- 使用者介面 (UI) 控制：它控制瀏覽器應用程序的 “Chrome” 部分，包括地址欄、書籤以及前進和後退按鈕。其中的 UI 線程 負責繪製這些瀏覽器按鈕和輸入字段
- 網路請求處理：瀏覽器進程中的 網路線程 專門負責與網路堆疊互動，從互聯網接收數據，處理 DNS 查詢、建立 TLS 連接等協議，並處理伺服器重定向。它還會執行 SafeBrowsing 檢查以防止使用者訪問惡意站點，以及跨域讀取阻塞 (CORB) 檢查以保護敏感的跨站點數據。
- 檔案和存儲訪問：它處理瀏覽器中 “不可見、特權” 的部分，例如檔案訪問，由其內部的 存儲線程 負責
- 導航流程管理：從使用者在地址欄輸入 URL 到頁面開始渲染，整個導航流程由瀏覽器進程協調。它會尋找或啟動一個渲染器進程來渲染網頁，並通過 IPC (進程間通信) 提交導航
- Service Worker 識別：當導航請求傳入時，網路線程會檢查請求的域名是否與已註冊的 Service Worker 作用域匹配。如果匹配，UI 線程會啟動一個渲染器進程來執行 Service Worker 代碼
- 輸入事件處理：使用者手勢（如觸摸或滑鼠點擊）首先由瀏覽器進程接收。由於標籤頁內的內容由渲染器進程處理，瀏覽器進程會將事件類型和坐標發送給渲染器進程
渲染進程#
- 網頁內容顯示：渲染器進程控制著標籤頁內顯示網站內容的全部區域
- 核心渲染工作：其核心任務是將 HTML、CSS 和 JavaScript 轉換為使用者可以互動的網頁。這包括解析 HTML 構建 DOM、解析 CSS 計算樣式、執行佈局以確定元素的幾何形狀、生成繪製記錄以及將頁面分層並進行合成
- 主線程：渲染器進程的主線程處理大部分發送給使用者的代碼，包括 HTML 解析、樣式計算、佈局、生成繪製記錄以及 JavaScript 執行
- 工作線程：如果使用了 Web Worker 或 Service Worker，部分 JavaScript 代碼會由渲染器進程中的 工作線程 處理
- 合成器線程和栅格線程：為了高效平滑地渲染頁面，渲染器進程內部還運行著 合成器線程 (Compositor thread) 和 栅格線程 (Raster threads)。合成器線程負責將頁面分成層，栅格線程將這些層分解成圖塊並栅格化存儲到 GPU 記憶體中，合成器線程再將它們合成一個幀
- Service Worker 執行：Service Worker 是運行在渲染器進程中的 JavaScript 代碼
GPU 進程#
- 處理 GPU 任務：它獨立於其他進程處理 GPU 任務。將其分離為單獨的進程是因為 GPU 會處理來自多個應用程序的請求並在同一表面上繪製它們。最終的合成器幀會發送到 GPU 進行顯示
插件進程#
- 控制插件：它控制網站使用的任何插件，例如 Flash
其他進程#
- 擴展進程 (Extension Process)：處理瀏覽器擴展程序的功能
- 實用工具進程 (Utility Processes)：處理其他各種輔助任務
多進程架構的好處#
-
提高穩定性：如果一個標籤頁變得無響應，只會影響該標籤頁所在的渲染器進程，而不會導致整個瀏覽器崩潰或所有標籤頁都無響應
-
增強安全性和沙盒化：操作系統提供了限制進程權限的機制，瀏覽器可以對渲染器進程等處理使用者輸入的進程進行沙盒化，限制它們對檔案等特定功能的訪問，從而提高了整體安全性。站點隔離 (Site Isolation) 功能進一步增強了安全性，它為每個跨站 iframe 運行一個獨立的渲染器進程，是分離站點的最有效方式
-
服務化 (Servicification)：Chrome 正在將瀏覽器程序的各個部分作為服務運行。在強大硬體上，每個服務可以拆分為不同的進程以提供更高的穩定性；在資源受限設備上，這些服務可以整合到一個進程中以節省記憶體佔用