JavaScript 单线程事件执行顺序：深入剖析宏任务与微任务

前端

2023-11-29 17:15:34

JavaScript，作为一种单线程语言，在事件执行顺序上有着其独特的机制。理解宏任务和微任务对于掌握 JavaScript 的异步编程至关重要。

单线程模型

JavaScript 运行在一个单线程中，这意味着它一次只能执行一个任务。当一个任务正在执行时，其他任务必须等待。这与多线程语言形成了鲜明的对比，在多线程语言中，多个任务可以同时执行。

事件队列和任务队列

JavaScript 维护着一个事件队列和一个任务队列。事件队列包含即将被执行的事件，而任务队列包含即将被执行的任务。

宏任务

宏任务是 JavaScript 中最常见的任务类型。它们包括：

脚本执行
setTimeout() 和 setInterval() 回调
DOM 操作（例如，添加或删除元素）

宏任务会被添加到任务队列中。当事件队列为空时，JavaScript 会从任务队列中获取下一个宏任务并执行它。

微任务

微任务是 JavaScript 中一种特殊的任务类型。它们比宏任务具有更高的优先级。微任务包括：

Promise.then() 和 async/await 回调
MutationObserver 回调

微任务会被添加到一个单独的队列中，称为微任务队列。当事件队列和任务队列都为空时，JavaScript 会从微任务队列中获取下一个微任务并执行它。

事件执行顺序

JavaScript 的事件执行顺序遵循以下规则：

执行事件队列中的所有事件。
清空微任务队列。
从任务队列中获取下一个宏任务并执行它。
重复步骤 1-3，直到事件队列和任务队列都为空。

示例

以下示例演示了宏任务和微任务的执行顺序：

console.log('宏任务 1');

Promise.resolve().then(() => {
  console.log('微任务 1');
});

console.log('宏任务 2');

setTimeout(() => {
  console.log('宏任务 3');
}, 0);

// 输出：
// 宏任务 1
// 微任务 1
// 宏任务 2
// 宏任务 3