一文详解前端Event Loop事件循环、微任务与宏任务
在前端开发中，JavaScript 的异步编程是一个非常重要的话题。理解事件循环（Event Loop）、微任务（Microtasks）和宏任务（Macrotasks）是掌握异步编程的关键。本文将通过详细的解释和示例，帮助你全面了解这些概念。
引言
JavaScript 是一种单线程编程语言，这意味着它在同一时间只能执行一个任务。然而，JavaScript 通过事件循环机制实现了高效的异步处理能力。本文将深入探讨事件循环的工作原理，以及微任务和宏任务的区别和应用。
事件循环（Event Loop）基本概念
单线程模型
JavaScript 运行在单线程环境中，这意味着所有的任务都在同一个线程上执行。这个线程被称为“主线程”。由于只有一个线程，所以 JavaScript 无法同时执行多个任务，这是为了避免多线程带来的复杂性和潜在的竞态条件问题。
任务队列
为了处理异步操作，JavaScript 引入了任务队列（Task Queues）的概念。任务队列可以分为两种类型：
- 宏任务队列（Macrotask Queue）：包含需要在当前任务完成后执行的任务。
- 微任务队列（Microtask Queue）：包含需要在当前任务和下一个宏任务之间执行的任务。
常见的宏任务和微任务
-
宏任务：
- 整体代码块
setTimeout和setInterval- I/O 操作
- UI 渲染
setImmediate（仅 Node.js）requestAnimationFrame（仅浏览器）
-
微任务：
Promise的then、catch和finallyMutationObserverprocess.nextTick（仅 Node.js）
事件循环的工作流程
事件循环的基本工作流程可以总结为以下几个步骤：
- 执行同步任务：首先执行所有同步任务，直到当前执行栈清空。
- 执行微任务：然后检查微任务队列，依次执行所有微任务，直到微任务队列清空。
- 渲染更新：如果此时页面有需要更新的部分，则进行渲染。
- 执行宏任务：最后，从宏任务队列中取出一个任务执行，并重复上述过程。
详细的执行步骤
- 执行当前宏任务：例如，执行全局代码或
setTimeout回调。 - 执行所有微任务：在当前宏任务执行完毕后，立即执行所有微任务。
- 渲染更新：如果有需要更新的 UI，浏览器会在此时进行渲染。
- 选择下一个宏任务：从宏任务队列中选择下一个宏任务，并重复上述步骤。
示例分析
示例 1：基本的宏任务和微任务
console.log('Start');
setTimeout(() => {
console.log('Timeout 1');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 1');
});
console.log('Middle');
setTimeout(() => {
console.log('Timeout 2');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 2');
});
console.log('End');
输出结果
Start
Middle
End
Promise 1
Promise 2
Timeout 1
Timeout 2
解释
- 同步代码
console.log('Start')、console.log('Middle')和console.log('End')先执行。 setTimeout和Promise被加入到相应的任务队列中。- 当同步代码执行完毕后，事件循环开始处理微任务队列中的任务，依次执行
Promise 1和Promise 2。 - 所有微任务执行完毕后，事件循环开始处理宏任务队列中的任务，依次执行
Timeout 1和Timeout 2。
示例 2：嵌套的宏任务和微任务
console.log('Start');
setTimeout(() => {
console.log('Timeout 1');
Promise.resolve().then(() => {
console.log('Promise 1');
});
}, 0);
Promise.resolve().then(() => {
console.log('Promise 2');
setTimeout(() => {
console.log('Timeout 2');
}, 0);
});
console.log('End');
输出结果
Start
End
Promise 2
Timeout 1
Promise 1
Timeout 2
解释
- 同步代码
console.log('Start')和console.log('End')先执行。 setTimeout和Promise被加入到相应的任务队列中。- 当同步代码执行完毕后，事件循环开始处理微任务队列中的任务，执行
Promise 2。 - 在
Promise 2的回调中，又添加了一个setTimeout到宏任务队列中。 - 所有微任务执行完毕后，事件循环开始处理宏任务队列中的任务，执行
Timeout 1。 - 在
Timeout 1的回调中，又添加了一个Promise 1到微任务队列中。 - 当前宏任务执行完毕后，事件循环再次处理微任务队列中的任务，执行
Promise 1。 - 最后，事件循环处理宏任务队列中的
Timeout 2。
总结
理解 JavaScript 的事件循环机制对于编写高效且响应迅速的应用至关重要。通过合理地利用宏任务和微任务，我们可以构建出更加复杂的异步逻辑，同时保持代码的清晰性和可维护性。希望本文能帮助你更好地掌握这一核心概念。
