关于JS宏任务和微任务

前言：近几天面试遇到的，不太确定谁先执行，在网上查了以后有说先执行微任务的，也有文章说是先执行宏任务的，然后参考了一些文章，多少明白了一些

为什么 JavaScript 是单线程的？

js是运行于浏览器的脚本语言，因其经常涉及操作dom，如果是多线程的，也就意味着，同一个时刻，能够执行多个任务。

试想，如果一个线程修改dom，另一个线程删除dom，那么浏览器就不知道该先执行哪个操作。

 JS事件循环机制（如图所示）

JS整段代码会作为一个宏任务进入主线程去执行：

• 同步代码直接执行
• 碰到setTimeout，分发到宏任务队列

• 碰到Promise.then，分发到微任务队列

 宏任务：每次只能执行一个宏任务

微任务：执行时机是在同步代码执行之后，下一个宏任务执行之前。

 如下案例：

console.log(1); // 直接执行

setTimeout(function() {
    console.log(2); // 进入宏任务队列
})

new Promise(function(resolve) {
    console.log(3); //直接执行
    resolve()
}).then(function() {
    console.log(4); // 进入微任务队列
})

console.log(5); // 直接执行

 重点：

在一次事件循环中，会先执行宏任务（主线程）再执行微任务（then）。
都执行完后则进入下一次事件循环，再从宏任务开始执行（setTimeout）。

所以在整段代码中，setTimeout是在then之后执行的，因为他俩不在同一次事件循环中。
 

事件循环中，宏任务先执行
整段代码中，异步的微任务先执行 

接下来我们在看一个例子：

console.log('script start');
setTimeout(function() { 
    console.log('setTimeout');
}, 0);
Promise.resolve().then(function() { 
    queueMicrotask(() => console.log('queueMicrotask'))
    console.log('promise');
});
console.log('script end');

 解析如下：

• 遇到 console.log 执行并打印
• 遇到 setTimeout，将回调加入宏任务队列
• 遇到 Promise.resolve()，此时状态已经改变，因此将 then 回调加入微任务队列
• 遇到 console.log 执行并打印

此时同步任务全部执行完毕，分别打印了 ‘script start’ 以及 ‘script end’，开始判断是否有微任务需要执行。

• 微任务队列存在任务，开始执行 then 回调函数
• 遇到 queueMicrotask，将回到加入微任务队列
• 遇到 console.log 执行并打印
  检查发现微任务队列存在任务，执行 queueMicrotask 回调
• 遇到 console.log 执行并打印

此时发现微任务队列已经清空，判断是否需要进行 UI 渲染。

• 执行宏任务，开始执行 setTimeout 回调
• 遇到 console.log 执行并打印

执行一个宏任务即结束，寻找是否存在微任务，开始循环判断…