网站群发软件,做网站有高手没有,天津网站推广有哪些,大安市建设局网站在前端开发中#xff0c;**宏任务#xff08;Macro Task#xff09;**和**微任务#xff08;Micro Task#xff09;**是 JavaScript 事件循环#xff08;Event Loop#xff09;中的两个重要概念。它们决定了异步代码的执行顺序。
---
### 1. **事件循环#xff08;Ev…
在前端开发中**宏任务Macro Task**和**微任务Micro Task**是 JavaScript 事件循环Event Loop中的两个重要概念。它们决定了异步代码的执行顺序。
---
### 1. **事件循环Event Loop** JavaScript 是单线程的通过事件循环机制处理异步任务。事件循环的核心是 - **主线程**执行同步代码。 - **任务队列**存放异步任务的回调函数。 - **事件循环**不断检查任务队列将任务推入主线程执行。
任务队列分为两种 - **宏任务队列**存放宏任务。 - **微任务队列**存放微任务。
---
### 2. **宏任务Macro Task** 宏任务是指需要较长时间执行的任务通常包括 - setTimeout 和 setInterval 的回调。 - setImmediateNode.js 特有。 - requestAnimationFrame浏览器特有。 - I/O 操作如文件读写、网络请求。 - UI 渲染浏览器特有。
**执行时机**每次事件循环中主线程会执行一个宏任务然后检查微任务队列。
---
### 3. **微任务Micro Task** 微任务是指需要尽快执行的任务通常包括 - Promise 的回调then、catch、finally。 - MutationObserver监听 DOM 变化。 - process.nextTickNode.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 的异步编程和事件循环。
