瀏覽器有多個(gè)線程：JS引擎線程、GUI渲染線程、http請求線程、事件處理線程、定時(shí)器觸發(fā)線程。其中JS引擎線程和GUI渲染線程是互斥的。
GUI渲染線程主要工作內(nèi)容
- 解析html文檔生成DOM
- css代碼轉(zhuǎn)換為cssom (css object model)
- 結(jié)合DOM和CSSOM生成渲染樹
- 生成布局（layout）
- 將布局繪制(paint)在屏幕上
屏幕刷新頻率和GUI渲染線程
GUI線程渲染的結(jié)果不會立刻呈現(xiàn)在屏幕上，等屏幕刷新時(shí)才會呈現(xiàn)出來。屏幕刷新頻率一般60HZ，即16.6ms刷新一次屏幕。
GUI渲染線程調(diào)度
事件循環(huán)請參考瀏覽器事件循環(huán)機(jī)制。在下次宏任務(wù)執(zhí)行前，GUI渲染線程開始工作，對頁面進(jìn)行渲染。即
// 宏任務(wù) --> 所有微任務(wù) --> 渲染（如果時(shí)間片到了） --> 宏任務(wù)...
例子1：
document.body.style = "background:blue";
console.log(1);
setTimeout(function fn() {
document.body.style = "background:black";
console.log(2);
}, 0);
執(zhí)行過程：
- script作為宏任務(wù)執(zhí)行，打印1；
- 渲染，背景藍(lán)色；
- 執(zhí)行宏任務(wù)fn，打印2；
- 渲染，背景黑色；
例子2：
let ul = document.getElementById("root");
setTimeout(function fn111() {
let li = document.createElement("li");
li.innerText = 11111;
ul.appendChild(li);
}, 0);
setTimeout(function fn2222222() {
let li = document.createElement("li");
li.innerText = 2222222222222;
ul.appendChild(li);
}, 0);
執(zhí)行過程：
- script作為宏任務(wù)執(zhí)行，定時(shí)器觸發(fā)線程把fn111, fn2222222放入宏任務(wù)隊(duì)列
- 執(zhí)行宏任務(wù)fn111
- 時(shí)間片沒到，繼續(xù)執(zhí)行fn2222222
- 渲染
下面是chrome performance Main 線程圖，黃色塊分別是fn111, fn2222222，紫色塊是Layout，綠色是paint
調(diào)用棧.png
例子3：
let ul = document.getElementById("root");
setTimeout(function fn111() {
console.time(1);
let li = document.createElement("li");
li.innerText = 11111;
ul.appendChild(li);
for (let index = 0; index < 200; index++) {
console.log(1);
}
}, 0);
setTimeout(function fn2222222() {
let li = document.createElement("li");
li.innerText = 2222222222222;
ul.appendChild(li);
// 模擬耗時(shí)任務(wù),大約16ms
for (let index = 0; index < 1; index++) {
console.log(1);
}
}, 0);
執(zhí)行過程：
- script作為宏任務(wù)執(zhí)行，定時(shí)器觸發(fā)線程把fn111, fn2222222放入宏任務(wù)隊(duì)列
- 執(zhí)行宏任務(wù)fn111
- 時(shí)間片到了，渲染
- 繼續(xù)執(zhí)行fn2222222
- 渲染
下面是chrome performance Main 線程圖，黃色塊分別是fn111, fn2222222，紫色塊是Layout，綠色是paint。
執(zhí)行棧.png
總結(jié)
js引擎線程和GUI渲染線程是互斥的；
js引擎線程和GUI渲染線程的調(diào)度順序：宏任務(wù) --》 所有微任務(wù) --》16.6ms的時(shí)間片到了調(diào)度渲染線程 --》宏任務(wù)...
