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