理解JavaScript中的事件循环、宏任务和微任务

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

摘要：

本文将介绍JavaScript中的事件循环、宏任务和微任务的概念，以及它们在JavaScript中的作用。通过了解这些概念，开发者可以更好地理解JavaScript的异步编程和代码执行顺序。

引言：

在JavaScript中，事件循环、宏任务和微任务是三个重要的概念，它们决定了代码的执行顺序和异步编程的实现。事件循环是一个循环过程，它负责处理JavaScript代码中的同步和异步任务。宏任务和微任务是事件循环中的两种任务类型，它们分别用于处理不同的异步任务。本文将介绍这些概念，帮助读者更好地理解JavaScript的异步编程和代码执行顺序。

正文：

一、事件循环（Event Loop） 🌟

事件循环是JavaScript中处理异步任务的一种机制。它分为两个阶段：宏任务队列和微任务队列。

1. 宏任务队列：包括setTimeout、setInterval、I/O操作、UI渲染等任务。这些任务在当前执行栈完成后，由事件循环异步执行。
2. 微任务队列：包括Promise.then、MutationObserver等任务。这些任务在当前执行栈完成后，立即执行，优先于宏任务队列。

二、宏任务（Macrotask） 🚀

宏任务是指在事件循环中处理长时间运行的任务。它们在当前执行栈完成后，由事件循环异步执行。

setTimeout(() => {
  console.log("宏任务执行");
}, 0);
console.log("同步代码执行");

三、微任务（Microtask） 📦

微任务是指在事件循环中处理短时间运行的任务。它们在当前执行栈完成后，立即执行，优先于宏任务队列。

Promise.resolve().then(() => {
  console.log("微任务执行");
});
console.log("同步代码执行");

四、总结 🎉

事件循环、宏任务和微任务是JavaScript中处理异步任务的关键概念。通过了解这些概念，开发者可以更好地编写异步代码，提高代码的性能和可维护性。

参考资料：

• MDN Web Docs: Event Loop
• JavaScript异步编程之事件循环、宏任务、微任务
• 深入理解JavaScript中的事件循环、宏任务和微任务