返回
深入剖析 JS 中的事件循环机制：宏任务和微任务的奥秘
前端
2023-11-17 05:56:59
在 JavaScript 中，事件循环机制是一个至关重要的概念，它决定了如何处理代码执行顺序和异步任务。了解事件循环对于编写高效、响应迅速的 JavaScript 应用程序至关重要。本文将深入探讨事件循环机制，重点关注宏任务和微任务，揭示它们之间的差异以及在代码执行中的作用。
事件循环概述
事件循环是一个不断循环的过程，它不断检查并执行来自各种队列的事件和任务。这些队列包括宏任务队列和微任务队列。当 JavaScript 引擎遇到异步任务时，它会将它们放入相应的队列中，而不是立即执行它们。这允许引擎在后台继续执行同步代码，同时异步任务在后台运行。
宏任务
宏任务是指 JavaScript 引擎执行的较长时间运行的任务，例如以下：
- 脚本执行（script 执行）
- setTimeout()
- setInterval()
- DOM 渲染
宏任务在宏任务队列中按顺序执行。当引擎完成执行当前宏任务时，它将从队列中取出下一个宏任务并执行它。
微任务
微任务是指 JavaScript 引擎执行的快速且轻量级的任务，例如：
- Promise 的 then() 处理程序
- MutationObserver 的回调函数
- queueMicrotask()
微任务在微任务队列中执行。与宏任务不同，微任务会在当前宏任务执行完成之前执行。这意味着，在当前宏任务执行期间，微任务队列可能被执行多次。
宏任务和微任务的执行顺序
宏任务和微任务的执行顺序遵循以下规则：
- 同步代码执行： 引擎从上到下执行同步代码。
- 宏任务执行： 当引擎遇到宏任务时，它将其放入宏任务队列。
- 微任务执行： 在宏任务执行期间，任何生成的微任务都会被放入微任务队列。
- 微任务队列执行： 当宏任务执行完成时，引擎会清空微任务队列，执行其中的所有微任务。
- 下一个宏任务执行： 完成后，引擎将从宏任务队列中取出下一个宏任务并执行它。
- 重复过程： 该过程一直重复，直到所有宏任务和微任务都执行完毕。
示例
以下代码片段演示了宏任务和微任务的执行顺序：
console.log('同步代码 1');
setTimeout(() => {
console.log('宏任务 1');
}, 0);
Promise.resolve().then(() => {
console.log('微任务 1');
});
console.log('同步代码 2');
输出结果为：
同步代码 1
同步代码 2
微任务 1
宏任务 1
结论
理解 JavaScript 中的事件循环机制对编写健壮、响应迅速的应用程序至关重要。宏任务和微任务的概念对于管理异步任务的执行顺序至关重要。通过了解这些概念及其执行顺序，开发人员可以优化代码并最大程度地提高应用程序的性能和用户体验。
