1. GUI线程
GUI线程是浏览器线程之一，它的作用主要是以下几点：
- 解析
html文档生成DOM。 -
CSS代码转换为CSSOM。 - 结合
DOM和CSSOM生成渲染树。 - 生成布局
layout。 - 将布局绘制
paint在屏幕上。
屏幕刷新频率
GUI线程渲染的结果不会立刻呈现在屏幕上，等屏幕刷新时才会呈现出来。屏幕刷新频率一般60HZ，即16.6ms刷新一次屏幕。
2. JS事件循环与DOM渲染
DOM渲染是在GUI线程中处理的，在下次宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。
事件循环.png
JS引擎和GUI线程是互斥的，因为JS引擎可能频繁修改DOM样式，等一轮事件循环完毕之后再统一执行GUI线程，这也是一种优化手段。来看一道题来加深理解：
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);
以上代码的执行流程是：
- 先执行同步任务，输出同步任务。
- 等待
2000000000次循环执行完毕。 - 输出微任务。
-
id为box的元素变成蓝色。 - 输出宏任务。
