宏任务和微任务

在前端开发中，**宏任务（Macro Task）**和**微任务（Micro Task）**是 JavaScript 事件循环（Event Loop）中的两个重要概念。它们决定了异步代码的执行顺序。

---

### 1. **事件循环（Event Loop）** JavaScript 是单线程的，通过事件循环机制处理异步任务。事件循环的核心是： - **主线程**：执行同步代码。 - **任务队列**：存放异步任务的回调函数。 - **事件循环**：不断检查任务队列，将任务推入主线程执行。

任务队列分为两种： - **宏任务队列**：存放宏任务。 - **微任务队列**：存放微任务。

---

### 2. **宏任务（Macro Task）** 宏任务是指需要较长时间执行的任务，通常包括： - `setTimeout` 和 `setInterval` 的回调。 - `setImmediate`（Node.js 特有）。 - `requestAnimationFrame`（浏览器特有）。 - I/O 操作（如文件读写、网络请求）。 - UI 渲染（浏览器特有）。

**执行时机**：每次事件循环中，主线程会执行一个宏任务，然后检查微任务队列。

---

### 3. **微任务（Micro Task）** 微任务是指需要尽快执行的任务，通常包括： - `Promise` 的回调（`then`、`catch`、`finally`）。 - `MutationObserver`（监听 DOM 变化）。 - `process.nextTick`（Node.js 特有）。

**执行时机**：每次宏任务执行完毕后，事件循环会清空微任务队列中的所有任务，然后再执行下一个宏任务。

---

### 4. **执行顺序** 事件循环的执行顺序如下： 1. 执行主线程的同步代码。 2. 执行当前宏任务。 3. 清空微任务队列中的所有任务。 4. 执行 UI 渲染（浏览器）。 5. 执行下一个宏任务。

---

### 5. **代码示例** ```javascript console.log('1. 同步代码'); // 同步代码，立即执行

setTimeout(() => {   console.log('4. 宏任务 - setTimeout'); // 宏任务 }, 0);

Promise.resolve().then(() => {   console.log('3. 微任务 - Promise'); // 微任务 });

console.log('2. 同步代码'); // 同步代码，立即执行 ```

**输出结果**： ``` 1. 同步代码 2. 同步代码 3. 微任务 - Promise 4. 宏任务 - setTimeout ```

**解释**： 1. 同步代码立即执行。 2. `Promise` 的微任务在同步代码之后、宏任务之前执行。 3. `setTimeout` 的宏任务在微任务之后执行。

---

### 6. **宏任务和微任务的区别** | 特性            | 宏任务（Macro Task）               | 微任务（Micro Task）               | |-----------------|------------------------------------|------------------------------------| | **执行时机**     | 每次事件循环执行一个宏任务         | 每次宏任务执行后清空微任务队列     | | **常见任务**     | `setTimeout`、`setInterval`、I/O   | `Promise`、`MutationObserver`      | | **优先级**       | 较低                               | 较高                               | | **队列类型**     | 宏任务队列                         | 微任务队列                         |

---

### 7. **实际应用** - **优化性能**：将高优先级任务放入微任务队列，确保尽快执行。 - **避免阻塞**：将耗时任务放入宏任务队列，避免阻塞主线程。 - **控制执行顺序**：通过微任务和宏任务的特性，控制异步代码的执行顺序。

---

### 总结 - **宏任务**：需要较长时间执行的任务，如 `setTimeout`、I/O 操作。 - **微任务**：需要尽快执行的任务，如 `Promise`、`MutationObserver`。 - **执行顺序**：同步代码 → 微任务 → 宏任务 → UI 渲染 → 下一个宏任务。

理解宏任务和微任务的机制，有助于更好地掌握 JavaScript 的异步编程和事件循环。