什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？

<think>我们正在讨论JavaScript中的事件循环、宏任务和微任务。根据用户的问题，我们需要解释这些概念以及它们之间的区别。同时，我们需要参考提供的引用内容，确保回答的准确性。关键点：1.JavaScript是单线程的，事件循环是其异步编程的核心。2.事件循环处理两种任务：宏任务和微任务。3.宏任务和微任务的区别在于它们的执行时机。根据引用[2]和[4]：-宏任务（MacroTask）是由宿主环境（浏览器或Node.js）提供的异步任务，例如：setTimeout,setInterval,I/O操作，UI渲染，事件监听，setImmediate（Node.js），以及整体代码（script标签）。-微任务（MicroTask）是在当前宏任务执行完毕后立即执行的任务，例如：Promise的回调（then/catch/finally）、MutationObserver、queueMicrotask、process.nextTick（Node.js）。执行顺序规则（引用[4]）：1.执行当前宏任务（同步代码）。2.当前宏任务执行完毕，立即执行所有微任务（如果有的话，微任务执行过程中新产生的微任务也会被添加到当前微任务队列并执行）。3.进行页面渲染（浏览器环境）。4.从宏任务队列中取出下一个宏任务执行。引用[3]强调了微任务的即时性和连续执行特性：微任务总是在当前宏任务结束后、下一个宏任务开始前执行，并且如果在执行微任务的过程中又产生了新的微任务，那么这些新的微任务会继续在当前事件循环的微任务阶段执行，直到微任务队列为空。这可能导致“任务饿死”（即宏任务长时间得不到执行）。因此，我们需要在回答中清晰地阐述：-事件循环的基本流程-宏任务和微任务的定义和常见类型-执行顺序（包括一个简单的例子）-它们之间的区别（执行时机、任务类型等）同时，我们还需要生成相关问题。注意：回答中引用的段落末尾需要添加引用标识，例如[^1]。</think>### JavaScript 宏任务与微任务详解 #### 一、核心概念 1. **事件循环（Event Loop）** JavaScript 是单线程语言，事件循环是其实现异步的核心机制。它持续检查： - **执行栈**：同步代码按顺序执行 - **任务队列**：异步任务完成后回调进入队列 - 当执行栈清空时，从任务队列取出任务执行[^2][^4] 2. **宏任务（MacroTask）** - **定义**：由宿主环境（浏览器/Node.js）发起的任务 - **常见类型**： ```javascript setTimeout(() => {}, 0) // 定时器 setInterval(() => {}, 0) // 周期性定时器 script标签内的整体代码 // 初始宏任务 I/O操作 // 文件读写等 UI渲染 // 浏览器重绘 ``` - **特性**：每次事件循环只执行一个宏任务[^4] 3. **微任务（MicroTask）** - **定义**：在当前宏任务结束后立即执行的任务 - **常见类型**： ```javascript Promise.then(() => {}) // Promise回调 MutationObserver // DOM变更监听 queueMicrotask(() => {}) // 专用API process.nextTick() // Node.js特有 ``` - **特性**：优先级高于宏任务，必须清空才执行下一宏任务[^3] #### 二、关键区别 | **特性** | 宏任务 | 微任务 | |----------------|---------------------------|---------------------------| | **执行时机** | 事件循环的每个周期执行一个 | 当前宏任务结束后立即执行 | | **任务来源** | 宿主环境（浏览器/Node） | JavaScript引擎 | | **队列类型** | 宏任务队列 | 微任务队列 | | **典型API** | `setTimeout`, `setInterval` | `Promise.then`, `queueMicrotask` | | **阻塞风险** | 不易造成阻塞 | 可能因无限添加导致"任务饿死"[^3] | #### 三、执行顺序规则 1. 执行当前宏任务（同步代码） 2. 执行**所有**微任务（包括新产生的微任务） 3. 浏览器环境进行UI渲染 4. 取下一个宏任务执行 ```mermaid graph LR A[执行宏任务] --> B{微任务队列<br>是否为空？} B -- 否 --> C[执行微任务] C --> B B -- 是 --> D[UI渲染] D --> E[取下一个宏任务] ``` #### 四、经典案例解析 ```javascript console.log("Start"); // 宏任务1-同步 setTimeout(() => console.log("Timeout"), 0); // 宏任务2 Promise.resolve() .then(() => console.log("Promise 1")) // 微任务1 .then(() => console.log("Promise 2")); // 微任务2 console.log("End"); // 宏任务1-同步 ``` **输出顺序**： ``` Start → End → Promise 1 → Promise 2 → Timeout ``` **原理**： 1. 同步代码（宏任务1）执行：输出 `Start`, `End` 2. 执行微任务队列：输出 `Promise 1`, `Promise 2` 3. UI渲染（本例无DOM操作） 4. 执行下一个宏任务：输出 `Timeout` > 微任务总在**当前宏任务结束后、下一个宏任务开始前**执行[^3]。若微任务中不断产生新微任务，会阻塞后续宏任务执行，导致界面卡顿（任务饿死）[^3]。