🤍 前端开发工程师、技术日更博主、已过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宏任务与微任务解析
