以 Chrome 爲例,它由多個進程組成,每個進程都有自己核心的職責,它們相互配合完成瀏覽器的整體功能。
Chrome 採用多進程架構,其頂層存在一個 Browser process 用以協調瀏覽器的其它進程。
優點
由於默認 新開 一個 tab 頁面 新建 一個進程,所以單個 tab 頁面崩潰不會影響到整個瀏覽器。
同樣,第三方插件崩潰也不會影響到整個瀏覽器。
多進程可以充分利用現代 CPU 多核的優勢。
方便使用沙盒模型隔離插件等進程,提高瀏覽器的穩定性。
缺點
系統爲瀏覽器新開的進程分配內存、CPU 等資源,所以內存和 CPU 的資源消耗也會更大。
不過 Chrome 在內存釋放方面做的不錯,基本內存都是能很快釋放掉給其他程序運行的。
一、瀏覽器的主要進程和職責
主進程 Browser Process
負責瀏覽器界面的顯示與交互。各個頁面的管理,創建和銷燬其他進程。網絡的資源管理、下載等。
第三方插件進程 Plugin Process
每種類型的插件對應一個進程,僅當使用該插件時才創建。
GPU 進程 GPU Process
最多隻有一個,用於 3D 繪製等
渲染進程 Renderer Process
稱爲瀏覽器渲染進程或瀏覽器內核,內部是多線程的。主要負責頁面渲染,腳本執行,事件處理等。(本文重點分析)
二、渲染進程 (瀏覽器內核)
瀏覽器的渲染進程是多線程的,我們來看看它有哪些主要線程:
1. GUI 渲染線程
-
負責渲染瀏覽器界面,解析 HTML,CSS,構建 DOM 樹和 RenderObject 樹,佈局和繪製等。
-
當界面需要重繪或迴流時,該線程就會執行。
-
注意,GUI 渲染線程與 JS 引擎線程是互斥的,當 JS 引擎執行時 GUI 線程會被掛起（相當於被凍結了）,GUI 更新會被保存在一個隊列中等到 JS 引擎空閒時立即被執行。
2. JS 引擎線程
-
Javascript 引擎,也稱爲 JS 內核,負責處理 Javascript 腳本程序。（例如 V8 引擎）
-
JS 引擎線程負責解析 Javascript 腳本,運行代碼。
-
JS 引擎一直等待着任務隊列中任務的到來,然後加以處理,一個 Tab 頁（渲染進程）中無論什麼時候都只有一個 JS 線程在運行 JS 程序。
-
注意,GUI 渲染線程與 JS 引擎線程是互斥的,所以如果 JS 執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染加載阻塞。
3. 事件觸發線程
-
歸屬於瀏覽器而不是 JS 引擎,用來控制事件循環（可以理解,JS 引擎自己都忙不過來,需要瀏覽器另開線程協助）
-
當 JS 引擎執行代碼塊如 setTimeOut 時（也可來自瀏覽器內核的其他線程,如鼠標點擊、AJAX 異步請求等）,會將對應任務添加到事件線程中
-
當對應的事件符合觸發條件被觸發時,該線程會把事件添加到待處理隊列的隊尾,等待 JS 引擎的處理
-
注意,由於 JS 的單線程關係,所以這些待處理隊列中的事件都得排隊等待 JS 引擎處理（當 JS 引擎空閒時纔會去執行）
4. 定時觸發器線程
-
setInterval 與 setTimeout 所在線程
-
瀏覽器定時計數器並不是由 JavaScript 引擎計數的,（因爲 JavaScript 引擎是單線程的, 如果處於阻塞線程狀態就會影響記計時的準確）
-
因此通過單獨線程來計時並觸發定時（計時完畢後,添加到事件隊列中,等待 JS 引擎空閒後執行）
-
注意,W3C 在 HTML 標準中規定,規定要求 setTimeout 中低於 4ms 的時間間隔算爲 4ms。
5. 異步 http 請求線程
-
在 XMLHttpRequest 在連接後是通過瀏覽器新開一個線程請求。
-
將檢測到狀態變更時,如果設置有回調函數,異步線程就產生狀態變更事件,將這個回調再放入事件隊列中。再由 JavaScript 引擎執行。
