宏任务与微任务

概论

• 同步代码
  • 主线程：顺序执行的代码
• 异步代码
  • 微任务队列：Promise
  • 宏任务队列：定时器

优先级：主线程 > 微任务队列 > 宏任务队列

定时器

• 宏任务
• 定时器的倒计时不会等待主线程
• 定时器是等倒计时时间完成后添加到宏任务

Promise

• 微任务
• Promise 内是同步代码
• .then 内的代码时异步代码

DOM 渲染

• DOM 渲染是在 GUI 线程中处理的，在下次宏任务执行前（本次微任务之后），GUI 渲染线程开始工作，对页面进行渲染。

new Promise((resolve) => {
    resolve();
}).then((res) => {
    console.log("微任务");
});
console.log("同步任务");
for (i = 0; i < 200000; i++) { };
const box = document.getElementById("box");
box.style.backgroundColor = "blue";
setTimeout(() => {
    console.log("宏任务");
}, 0);

以上代码的执行流程是：

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

任务共享内存

JS 里的宏任务是一个个执行的，不会存在抢资源的问题