渲染進程裏的線程

首先我們來看一下瀏覽器的各個進程以及其中對我們前端來說最重要的渲染進程。爲什麼說渲染進程對我們前端來說最重要呢,因爲頁面的渲染,JS的執行,事件的循環都是在渲染進程內進行。請參考下圖(⚠️下圖僅僅爲一般狀態下的進程示意圖,由於Chrome當前面向服務的架構,當Chrome在功能強大的硬件上運行時,它可能會將每個服務拆分爲不同的進程以提供更高的穩定性,但是如果是在資源受限的設備上,Chrome會將服務整合到一個進程中以節省內存。具體參考:(https://www.yuque.com/suihangadam/liulanqi/eaf7na

 

渲染進程是多線程的,它主要包含了以下六個線程:

GUI渲染線程

負責渲染瀏覽器界面,解析HTML,CSS,構建DOM樹和RenderObject樹,佈局和繪製等,當界面需要重繪(Repaint)或由於某種操作引發迴流(reflow)時,該線程就會執行。

注意⚠️:GUI渲染線程與JS引擎線程是互斥的,當JS引擎執行時GUI線程會被掛起(相當於被凍結了),GUI更新會被保存在一個隊列中等到JS引擎空閒時立即被執行。

JS引擎線程

JS引擎線程(V8引擎)負責解析Javascript腳本,運行代碼。JS引擎一直等待着任務隊列中任務的到來,然後加以處理,一個Tab頁(renderer進程)中無論什麼時候都只有一個JS線程在運行JS程序

注意⚠️:GUI渲染線程與JS引擎線程是互斥的,所以如果JS執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染加載阻塞。

事件觸發線程

歸屬於瀏覽器而不是JS引擎,用來控制事件循環。當JS引擎執行代碼塊如setTimeOut時(也可來自瀏覽器內核的其他線程,如鼠標點擊、AJAX異步請求等),會將對應任務添加到事件線程中

當對應的事件符合觸發條件被觸發時,該線程會把事件添加到待處理隊列的隊尾,等待JS引擎的處理

注意⚠️:由於JS的單線程關係,所以這些待處理隊列中的事件都得排隊等待JS引擎處理(當JS引擎空閒時纔會去執行)

定時觸發器線程

setInterval與setTimeout所在線程,瀏覽器定時計數器並不是由JavaScript引擎計數的,(因爲JavaScript引擎是單線程的, 如果處於阻塞線程狀態就會影響記計時的準確),因此通過單獨線程來計時並觸發定時(計時完畢後,添加到事件隊列中,等待JS引擎空閒後執行)

注意⚠️:W3C在HTML標準中規定,規定要求setTimeout中低於4ms的時間間隔算爲4ms。(也就是0ms也算4ms)

異步http請求線程

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

合成線程

在GUI渲染線程後執行,將GUI渲染線程生成的帶繪製列表轉換爲位圖。

 

參考:

https://blog.csdn.net/fredricen/java/article/details/105217588

百度百科

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