宏任务与微任务：JavaScript异步编程的秘密

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

摘要：

本文将详细介绍JavaScript中的宏任务和微任务的概念、执行顺序以及在异步编程中的应用，帮助您理解这一关键的异步处理机制。

引言：

🌐 在JavaScript中，事件循环是实现异步编程的核心。宏任务和微任务是事件循环中的两个重要概念，它们定义了异步代码的执行顺序。接下来，让我们一起来探索宏任务和微任务的魅力。

正文：

1️⃣ 宏任务（Macrotask）

宏任务（Macrotask）是 JavaScript 中的一个概念，它指的是那些需要较长时间才能完成的任务。宏任务通常在主线程上执行，可能会阻塞主线程的渲染。宏任务主要包括以下几种：

1. script（整体代码）
2. setTimeout
3. setInterval
4. I/O 操作（如读写文件、网络请求等）
5. UI 渲染

宏任务与微任务（Microtask）相对应，微任务通常指的是那些可以快速完成的任务，例如处理一些数据、执行一些函数等。在 JavaScript 中，微任务主要通过 Promise、async/await 等语法实现。

宏任务与微任务的区分主要是根据任务的执行时间，宏任务通常需要较长时间才能完成，而微任务通常可以在较短的时间内完成。

在 JavaScript 引擎中，宏任务和微任务是分开执行的。当主线程空闲时，JavaScript 引擎会执行微任务；当有宏任务需要执行时，JavaScript 引擎会暂停微任务的执行，先执行宏任务。这样可以确保主线程的实时性，提高页面的响应速度。

宏任务主要包括：

• 整体代码script（整体代码执行）
• 渲染事件（如DOMContentLoaded）
• 定时器（setTimeout、setInterval）
• I/O（如读写文件、网络请求）
• UI交互事件（如click、scroll）
• 消息队列（如Web Workers）

2️⃣ 微任务（Microtask）

微任务（Microtask）是 JavaScript 中的一个概念，它指的是那些可以快速完成的任务。微任务通常在主线程上执行，不会阻塞主线程的渲染。微任务主要包括以下几种：

1. Promise
2. async/await
3. MutationObserver
4. IntersectionObserver

微任务与宏任务（Macrotask）相对应，宏任务通常指的是那些需要较长时间才能完成的任务，例如处理一些数据、执行一些函数等。在 JavaScript 中，宏任务主要通过 setTimeout、setInterval 等语法实现。

微任务与宏任务的区分主要是根据任务的执行时间，微任务通常需要较短的时间才能完成，而宏任务通常需要较长时间才能完成。

在 JavaScript 引擎中，微任务和宏任务是分开执行的。当主线程空闲时，JavaScript 引擎会执行微任务；当有宏任务需要执行时，JavaScript 引擎会暂停微任务的执行，先执行宏任务。这样可以确保主线程的实时性，提高页面的响应速度。

微任务主要包括：

• Promise.then()
• async/await
• MutationObserver
• Object.observe（已废弃）
• 手动执行的微任务队列（如process.nextTick()）

3️⃣ 执行顺序

在JavaScript中，事件循环按顺序执行宏任务和微任务。每个宏任务执行完毕后，会执行所有微任务，然后继续下一个宏任务，如此循环。这种机制确保了异步代码的有序执行。

4️⃣ 应用场景

宏任务和微任务在实际开发中有广泛应用，例如：

• 实现轮播图、动画等需要与UI交互的功能。
• 实现复杂的异步逻辑，如数据处理、网络请求等。
• 优化页面性能，如使用微任务进行数据更新，避免重排和重绘。

总结：

🎉 宏任务和微任务是JavaScript异步编程的关键概念，它们定义了异步代码的执行顺序。通过了解宏任务和微任务的概念、执行顺序以及应用场景，我们可以更好地利用它们实现高效的异步编程。

参考资料：

• 宏任务与微任务 百度百科
• MDN Web Docs - JavaScript 事件循环
• JavaScript宏任务与微任务解析