1. GUI線程
GUI線程是瀏覽器線程之一揍魂，它的作用主要是以下幾點(diǎn)：
- 解析
html文檔生成DOM桨醋。 -
CSS代碼轉(zhuǎn)換為CSSOM。 - 結(jié)合
DOM和CSSOM生成渲染樹现斋。 - 生成布局
layout喜最。 - 將布局繪制
paint在屏幕上。
屏幕刷新頻率
GUI線程渲染的結(jié)果不會(huì)立刻呈現(xiàn)在屏幕上庄蹋，等屏幕刷新時(shí)才會(huì)呈現(xiàn)出來瞬内。屏幕刷新頻率一般60HZ，即16.6ms刷新一次屏幕限书。
2. JS事件循環(huán)與DOM渲染
DOM渲染是在GUI線程中處理的遂鹊，在下次宏任務(wù)執(zhí)行前，GUI渲染線程開始工作蔗包，對(duì)頁(yè)面進(jìn)行渲染。
事件循環(huán).png
JS引擎和GUI線程是互斥的慧邮，因?yàn)?code>JS引擎可能頻繁修改DOM樣式调限，等一輪事件循環(huán)完畢之后再統(tǒng)一執(zhí)行GUI線程，這也是一種優(yōu)化手段误澳。來看一道題來加深理解：
new Promise((resolve) => {
resolve();
}).then((res) => {
console.log("微任務(wù)");
});
console.log("同步任務(wù)");
for (i = 0; i < 2000000000; i++) {};
const box = document.getElementById("box");
box.style.backgroundColor = "blue";
setTimeout(() => {
console.log("宏任務(wù)");
}, 0);
以上代碼的執(zhí)行流程是：
- 先執(zhí)行同步任務(wù)耻矮，輸出同步任務(wù)。
- 等待
2000000000次循環(huán)執(zhí)行完畢忆谓。 - 輸出微任務(wù)裆装。
-
id為box的元素變成藍(lán)色。 - 輸出宏任務(wù)倡缠。
