返回
宏任务VS微任务：谁先执行？
前端
2023-11-14 06:01:45
宏任务与微任务：深入解析 JavaScript 中的异步执行
摘要
在 JavaScript 的异步执行机制中，宏任务和微任务是两个关键概念。理解它们之间的差异和执行顺序对于编写高效、可维护的代码至关重要。本文将深入探讨宏任务和微任务，阐述它们的定义、执行顺序、应用场景和注意事项。
宏任务
宏任务是一类大块的异步任务，包括：
- 脚本执行
- 定时器（setTimeout、setInterval、setImmediate）
- 输入/输出操作（读取文件、网络请求）
- GUI 操作（更新 DOM、事件处理）
微任务
微任务是一类细小、快速的异步任务，包括：
- Promise.then()
- MutationObserver
- process.nextTick
执行顺序
通常，宏任务和微任务按照以下顺序执行：
- 同步任务： 执行主线程上的同步任务，即脚本执行。
- 宏任务： 执行宏任务队列中的任务，包括定时器、输入/输出和 GUI 操作。
- 微任务： 执行微任务队列中的任务，包括 Promise、MutationObserver 和 process.nextTick。
微任务插队
在某些情况下，微任务会在宏任务之前执行，称为微任务插队。这发生在以下场景：
- 当宏任务需要访问或修改 DOM 时，浏览器会先执行所有微任务，再继续执行宏任务。
- 当宏任务调用其他异步函数时，浏览器也会先执行所有微任务，再继续执行宏任务。
代码示例
考虑以下代码：
console.log('1');
setTimeout(() => {
console.log('3');
}, 0);
Promise.then(() => {
console.log('2');
});
console.log('4');
执行顺序：
- console.log('1')
- console.log('4')
- 将 setTimeout 回调添加到宏任务队列
- 将 Promise.then() 回调添加到微任务队列
- 执行微任务队列，输出 '2'
- 执行宏任务队列，输出 '3'
应用场景
- 宏任务： 用于执行耗时的任务，例如定时器、I/O 操作和 GUI 更新。
- 微任务： 用于执行快速、轻量级的任务，例如更新 Promise 状态、监听 DOM 变化和处理事件。
注意事项
- 不同的浏览器实现可能会影响宏任务和微任务的执行顺序。
- 微任务插队可能会改变宏任务的执行顺序，需要在设计代码时考虑。
- 宏任务和微任务都是异步执行的，使用时要注意异步带来的影响。
常见问题解答
- 微任务和宏任务的主要区别是什么？
答：微任务比宏任务更小、更轻量级，优先于宏任务执行。
- 为什么微任务会出现插队？
答：为了保持 DOM 和事件处理的响应性，当宏任务涉及这些操作时，浏览器会先执行所有微任务。
- 在使用宏任务和微任务时有什么需要注意的吗？
答：注意浏览器实现的差异、微任务插队的潜在影响以及异步带来的后果。
- 宏任务和微任务的常见应用场景是什么？
答：宏任务用于耗时的操作，微任务用于快速、轻量级的任务，例如更新 Promise 状态和处理事件。
- 如何防止微任务插队带来的问题？
答：使用 Promise.all() 或 async/await 来组合微任务，从而避免过度插队。
总结
理解宏任务和微任务对于编写高效、响应式的 JavaScript 代码至关重要。通过掌握它们的执行顺序、应用场景和注意事项，开发人员可以充分利用这些强大的异步机制，打造高质量的应用程序。
