🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在 JavaScript 异步编程中，宏任务（MacroTask）和微任务（MicroTask）是至关重要的概念。它们构成了 JavaScript 事件循环机制的核心部分，理解宏任务和微任务的执行顺序和工作原理，对于编写高效、稳定的异步代码至关重要。本文将深入探讨宏任务和微任务的概念、区别、执行顺序以及实际应用场景。

宏任务和微任务的基本概念

宏任务

宏任务是由宿主环境（如浏览器或 Node.js）发起的异步任务。常见的宏任务包括：

• setTimeout 和 setInterval：用于在指定的时间后执行代码或按一定时间间隔重复执行代码。
• setImmediate（Node.js 环境）：在当前事件循环的末尾执行回调函数。
• I/O 操作：如文件读取、网络请求等，这些操作通常由操作系统或浏览器的底层机制处理，完成后会将回调函数放入宏任务队列。
• UI 渲染（浏览器环境）：浏览器在某些情况下会将 UI 渲染操作作为宏任务来处理，确保页面的更新和重绘。

微任务

微任务是由 JavaScript 引擎发起的异步任务，通常用于处理一些需要在当前任务完成后立即执行的操作。常见的微任务包括：

• Promise.then 和 Promise.catch：当 Promise 对象的状态发生改变时，对应的 then 或 catch 方法中的回调函数会被放入微任务队列。
• MutationObserver：用于监听 DOM 树的变化，当 DOM 发生变化时，相应的回调函数会作为微任务执行。
• process.nextTick（Node.js 环境）：在 Node.js 中，process.nextTick 会在当前操作结束后立即执行，优先级高于其他微任务。

宏任务和微任务的执行顺序

JavaScript 的事件循环机制负责处理宏任务和微任务，其基本执行顺序如下：

1. 执行同步代码：JavaScript 引擎首先会执行全局代码中的同步任务，将这些任务依次压入调用栈并执行。
2. 处理微任务队列：当同步代码执行完毕后，调用栈为空，事件循环会检查微任务队列。如果微任务队列中有任务，则会依次执行微任务队列中的所有任务，直到微任务队列为空。
3. 执行一个宏任务：微任务队列处理完毕后，事件循环会从宏任务队列中取出一个宏任务放入调用栈执行。
4. 重复步骤 2 和 3：每次宏任务执行完毕后，都会再次检查微任务队列，优先处理微任务队列中的所有任务，然后再从宏任务队列中取出下一个宏任务执行，如此循环，直到宏任务队列和微任务队列都为空。

示例代码分析

console.log('1. 同步代码开始');

// 宏任务
setTimeout(() => {
    console.log('4. setTimeout 回调执行');
}, 0);

// 微任务
Promise.resolve().then(() => {
    console.log('3. Promise 微任务回调执行');
});

console.log('2. 同步代码结束');

上述代码的执行顺序如下：

1. 执行同步代码，输出 1. 同步代码开始 和 2. 同步代码结束。
2. 遇到 Promise.resolve().then，将其回调函数放入微任务队列。
3. 遇到 setTimeout，将其回调函数放入宏任务队列。
4. 同步代码执行完毕，调用栈为空，开始处理微任务队列，输出 3. Promise 微任务回调执行。
5. 微任务队列处理完毕，开始处理宏任务队列，输出 4. setTimeout 回调执行。

宏任务和微任务的区别

发起者不同

宏任务由宿主环境发起，而微任务由 JavaScript 引擎发起。这意味着宏任务的执行通常与外部环境（如操作系统、浏览器）的交互有关，而微任务主要用于处理 JavaScript 内部的异步操作。

执行时机不同

微任务的执行优先级高于宏任务。在每次宏任务执行完毕后，都会优先处理微任务队列中的所有任务，确保微任务能够在当前事件循环中尽快执行。

队列管理不同

宏任务和微任务分别有自己的任务队列。宏任务队列通常包含多个不同类型的宏任务，而微任务队列相对简单，主要用于存储 Promise 等产生的微任务。

实际应用场景

优化性能

在处理大量异步操作时，合理使用宏任务和微任务可以优化性能。例如，将一些需要在当前任务完成后立即执行的操作放在微任务中处理，避免不必要的延迟。

处理异步数据

在处理异步数据时，使用 Promise 和微任务可以确保数据的处理顺序和一致性。例如，在进行网络请求时，使用 Promise 封装请求，并在 then 方法中处理返回的数据，保证数据处理在请求完成后立即执行。

实现异步迭代

在实现异步迭代时，微任务可以用于控制迭代的顺序和节奏。例如，使用 async/await 结合 Promise 实现异步迭代，确保每次迭代的结果在处理完成后再进行下一次迭代。

总结

宏任务和微任务是 JavaScript 异步编程中不可或缺的概念，它们通过事件循环机制协同工作，确保异步任务能够按照预期的顺序执行。理解宏任务和微任务的区别、执行顺序以及实际应用场景，有助于开发者编写高效、稳定的异步代码，提升应用程序的性能和用户体验。在实际开发中，要根据具体需求合理使用宏任务和微任务，充分发挥它们的优势。