宏任务和微任务和DOM渲染

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);

以上代码的执行流程是：

1. 先执行同步任务，输出同步任务。
2. 等待2000000000次循环执行完毕。
3. 输出微任务。
4. id为box的元素变成蓝色。
5. 输出宏任务。