宏任务和微任务和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. 输出宏任务。
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容