当前位置：首页 > news >正文

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

news 2025/9/11 6:01:44

在这里插入图片描述

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

文章目录

- 摘要：
- 引言：
- 正文：
- - 1️⃣ 宏任务（Macrotask）
  - 2️⃣ 微任务（Microtask）
  - 3️⃣ 执行顺序
  - 4️⃣ 应用场景
- 总结：
- 参考资料：

摘要：

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

引言：

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

正文：

1️⃣ 宏任务（Macrotask）

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

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

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

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

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

宏任务主要包括：

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

2️⃣ 微任务（Microtask）

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

Promise
async/await
MutationObserver
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宏任务与微任务解析