浅谈JavaScript宏任务和微任务执行顺序

浅谈JavaScript宏任务和微任务执行顺序

在 JavaScript 中，任务被分为 宏任务（macrotask）和 微任务（microtask）。而在 JavaScript 中，事件循环（event loop）来负责管理和执行这些任务。

宏任务（macrotask）

宏任务是 JavaScript 中较为常见的任务类型，包括以下几种：

• 脚本本身；
• 用户界面交互事件，如鼠标点击、键盘事件等；
• setTimeout() 和 setInterval() 定时器；
• XMLHttpRequest 网络请求；
• postMessage 等。

微任务（microtask）

相比宏任务稍微不那么常见，但又极为重要的微任务在 JavaScript 中起着至关重要的作用，其执行顺序远远高于宏任务。常见的微任务包括：

• Promise；
• async / await；
• process.nextTick(Node.js 的特有 API)。

任务的执行顺序

在 JavaScript 中，任务的执行顺序是由事件循环来管理和决定的。事件循环的机制是：当任务队列中有任务需要执行时，将队列中的任务按照添加顺序逐一取出并执行，以此往复，直到所有的任务都被处理完毕。

根据事件循环机制的规则，JavaScript 中宏任务的执行优先级要低于微任务，也就是说微任务会先于宏任务执行。但是需要注意的是，同一类型的任务(即宏任务间、或微任务间)之间的执行顺序是可以被保证的, 但是不同类型的任务（即宏任务与微任务）之间就不能保证执行顺序了。

例如，在以下代码中，先输出第二个 Promise 的结果，再输出第一个 Promise 的结果：

Promise.resolve().then(() => {
  console.log("Promise1");
  Promise.resolve().then(() => {
    console.log("Promise2");
  });
});

再例如，在以下代码中，先输出第一个 setTimeout 回调函数的结果，再输出第二个：

setTimeout(() => {
  console.log("setTimeout1");
  Promise.resolve().then(() => {
    console.log("setTimeout1-Promise");
  });
}, 0);

setTimeout(() => {
  console.log("setTimeout2");
}, 0)

在上面例子中，setTimeout1先进入宏任务队列，紧接着Promise直接进入当前微任务队列，等当前微任务队列都处理完毕后才会从宏任务队列中取出setTimeout2处理。

在实际工作中，理解和把握好 JavaScript 任务的执行顺序，对于代码编写和效率提升非常重要。