瀏覽器執行緒

小強精神發表於2018-12-06

瀏覽器的渲染程式是多執行緒的。js是阻塞單執行緒的。 瀏覽器包含有以下執行緒:

1.GUI渲染執行緒

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

2.JS引擎執行緒

也稱為JS核心,負責處理Javascript指令碼程式。(例如V8引擎) JS引擎執行緒負責解析Javascript指令碼,執行程式碼。 JS引擎一直等待著任務佇列中任務的到來,然後加以處理,一個Tab頁(renderer程式)中無論什麼時候都只有一個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引擎執行。

相關文章