JavaScript 微任务和宏任务讲解

JavaScript 微任务和宏任务讲解

在 JavaScript 中，异步任务主要分为微任务和宏任务两种。宏任务可以理解为宏大的任务，就是需要花费比较长时间才能完成的任务，比如定时器、ajax 请求、DOM 事件等。微任务可以理解为小任务，比较轻量，基本上可以在当前任务完成后马上被执行，比如 Promise。

在执行异步任务时，引擎会将宏任务放入宏任务队列中，并在执行完当前任务后优先处理宏任务队列中的任务。而当一个宏任务执行完之后，它所携带的微任务会被全部执行完后才会继续执行下一个宏任务。

下面通过两条示例来说明：

示例一

console.log('start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

new Promise(function(resolve) {
  console.log('promise');
  resolve();
}).then(function() {
  console.log('then');
});

console.log('end');

在上面这个例子中，先输出 start，然后创建了一个 Promise 对象并打印了 promise，接着运行到 .then() 时，会将回调函数 function() { console.log('then'); } 添加到微任务队列中，此时输出 end，然后宏任务队列中只有一个定时器任务，输出 setTimeout。

所以最终的输出结果为：

start
promise
end
then
setTimeout

示例二

console.log('start');

setTimeout(function() {
  console.log('setTimeout1');
  Promise.resolve().then(function() {
    console.log('then1');
  });
}, 0);

setTimeout(function() {
  console.log('setTimeout2');
  Promise.resolve().then(function() {
    console.log('then2');
  });
}, 0);

console.log('end');

在上面这个例子中，首先输出 start，然后创建了两个定时器任务，并分别添加了两个微任务 then1 和 then2，最后输出 end。

所以最终的输出结果为：

start
end
setTimeout1
then1
setTimeout2
then2

需要注意的是，在某些特定场景下，微任务和宏任务的执行顺序可能存在一些不同。比如在节点监听器中，MutationObserver 监听到 DOM 变化后，会先执行微任务再执行宏任务。