原理分析---瀏覽器進程和線程

目前主流瀏覽器有如下進程:

1個瀏覽器主進程
1個GPU進程
1個網絡進程
多個渲染進程(因爲每個Tab頁都需要一個單獨的渲染進程來渲染,因此每個Tab頁也是一個單獨的進程)
多個插件進程
在這裏插入圖片描述
瀏覽器主進程:主要負責界面顯示、用戶交互、子進程管理,同時提供存儲等功能。
渲染進程:核心任務是將 HTML、CSS 和 JavaScript 轉換爲用戶可以與之交互的網頁,排版引擎 Blink 和 JavaScript 引擎 V8 都是運行在該進程中,默認情況下,Chrome 會爲每個 Tab 標籤創建一個渲染進程。出於安全考慮,渲染進程都是運行在沙箱模式下。
GPU 進程:GPU 進程的使用初衷是爲了實現 3D CSS 的效果,只是隨後網頁、Chrome 的 UI 界面都選擇採用 GPU 來繪製,這使得 GPU 成爲瀏覽器普遍的需求。最後,Chrome 在其多進程架構上也引入了 GPU 進程。
網絡進程:主要負責頁面的網絡資源加載。
插件進程:主要是負責插件的運行,因插件易崩潰,所以需要通過插件進程來隔離,以保證插件進程崩潰不會對瀏覽器和頁面造成影響。

其中,渲染進程是瀏覽器的內核,負責瀏覽器運行最核心的工作,渲染進程是多線程的,那麼有哪些線程呢?

瀏覽器內核(渲染進程)有哪些線程?

5 個線程:
在這裏插入圖片描述

1 GUI渲染線程
負責渲染瀏覽器界面,解析HTML,CSS,構建DOM樹和RenderObject樹,佈局和繪製等。
當界面需要重繪(Repaint)或由於某種操作引發迴流(reflow)時,該線程就會執行
注意,GUI渲染線程與JS引擎線程是互斥的,當JS引擎執行時GUI線程會被掛起(相當於被凍結了),GUI更新會被保存在一個隊列中等到JS引擎空閒時立即被執行。

2 JS引擎線程(單線程)
也稱爲JS內核,負責處理Javascript腳本程序。(例如常常聽到的谷歌瀏覽器的V8引擎,新版火狐的JaegerMonkey引擎等)
JS引擎線程負責解析Javascript腳本,運行代碼。
JS引擎一直等待着任務隊列中任務的到來,然後加以處理,一個Tab頁(renderer進程)中無論什麼時候都只有一個JS線程在運行JS程序
同樣注意,GUI渲染線程與JS引擎線程是互斥的,所以如果JS執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染加載阻塞。

3 事件觸發線程
歸屬於渲染進程而不是JS引擎,用來控制事件輪詢(可以理解,JS引擎自己都忙不過來,需要瀏覽器另開線程協助)
當JS引擎執行代碼塊如鼠標點擊、AJAX異步請求等,會將對應任務添加到事件觸發線程中
當對應的事件符合觸發條件被觸發時,該線程會把事件添加到待處理任務隊列的隊尾,等待JS引擎的處理
注意,由於JS的單線程關係,所以這些待處理隊列中的事件都得排隊等待JS引擎處理(當JS引擎空閒時纔會去執行)

4 定時觸發器線程
定時器 setIntervalsetTimeout 所在線程
瀏覽器定時計數器並不是由JavaScript引擎計數的,(因爲JavaScript引擎是單線程的, 如果任務隊列處於阻塞線程狀態就會影響記計時的準確)
因此通過單獨線程來計時並觸發定時(計時完畢後,添加到js引擎的事件隊列中,等待JS引擎空閒後執行
注意,W3C在HTML標準中規定,規定要求setTimeout中低於4ms的時間間隔算爲4ms。

5 異步http請求線程
用於處理請求XMLHttpRequest,在連接後是通過瀏覽器新開一個線程請求。如ajax,是 瀏覽器新開一個http線程
將檢測到狀態變更(如ajax返回結果)時,如果設置有回調函數,異步線程就產生狀態變更事件,將這個回調再放入js引擎線程的事件隊列中。再由JavaScript引擎執行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章