js 宏任务与微任务总结

宏任务macrotask有哪些

script setTimeout setInterval MessageChannel postMessage setImmediate requestAnimationFrame I/O操作 UI渲染

微任务microtask有哪些

process.nextTick MutationObserver Promise.then

执行优先级

主线程script>
微任务process.nextTick>promise>
宏任务setTimeout>setInterval>setImmediate>I/O>UI rendering

I/O是什么

mouse click , keypresses, network events

js内部执行机制

主线程script执行完=> 执行所有微任务=> 执行栈中第一个宏任务=> 执行所有微任务=> 执行栈中第一个宏任务=>…

举个例子,打印顺序就是数字顺序:

setTimeout(() => console.log(2), 0);
setTimeout(() => {
  console.log(3);
  Promise.resolve().then(() => {
    console.log(4);
    Promise.resolve().then(() => {
      console.log(6);
    });
    console.log(5)
  });
  setTimeout(() => console.log(8), 0);
}, 0);
setTimeout(() => console.log(7), 0);
Promise.resolve().then(() => {
  console.log(1);
});
//process.nextTick(()=>console.log(0)); //浏览器环境注释此句

关注下再走呗 +_+

JavaScript 中的任务MacroTask任务MicroTask)是事件循环(Event Loop)机制的重要组成部分,它们共同决定了异步任务的执行顺序行为。理解这两者之间的区别执行机制,有助于编写高效、可预测的异步代码。 ### 任务任务的基本概念 任务由宿主环境(如浏览器或 Node.js)调度,每个任务执行一次事件循环的完整周期。常见的任务包括 `setTimeout`、`setInterval`、`setImmediate`(Node.js)、I/O 操作、UI 渲染以及整体脚本(`script`)执行等[^4]。 任务则是在当前任务执行结束后立即执行的任务,具有更高的优先级。它们通常用于处理高优先级的异步操作,例如 `Promise.then`/`.catch`/`.finally`、`MutationObserver`(DOM 变化监听)、`queueMicrotask` 以及 Node.js 中的 `process.nextTick` 等[^4]。 ### 执行顺序规则 JavaScript 的事件循环遵循以下执行顺序规则: 1. 执行当前任务中的同步代码。 2. 当前任务执行完毕后,执行所有在任务队列中的任务。 3. 渲染页面(仅限浏览器环境)。 4. 执行下一个任务。 5. 重复上述过程。 这意味着任务总是优先于下一个任务执行,即使它们的触发时间相同。例如,在以下代码中: ```javascript console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); ``` 输出顺序为: ``` Start End Promise Timeout ``` 这表明任务(`Promise.then`)在任务(`setTimeout`)之前执行[^3]。 ### 任务任务的区别 | 特性 | 任务 | 任务 | |--------------------|----------------------------------|----------------------------------| | 调度来源 | 宿主环境(浏览器/Node.js) | JavaScript 引擎 | | 优先级 | 较低 | 较高 | | 执行时机 | 每个事件循环周期执行一个任务 | 当前任务结束后立即执行 | | 常见类型 | `setTimeout`、`setInterval`、I/O、UI 渲染 | `Promise.then`、`MutationObserver`、`queueMicrotask` | | 是否阻塞主线程 | 是(长时间运行的任务会阻塞) | 否(任务在主线程空闲时执行) | ### 实际应用优化建议 - **避免任务阻塞**:长时间运行的任务可能会阻塞主线程,影响页面响应。可以通过将复杂计算拆分为多个任务或使用 Web Worker 来避免阻塞。 - **任务链问题**:连续的任务(如多个 `Promise.then` 链)会延迟下一个任务的执行,可能导致页面渲染延迟。可以通过 `setTimeout` 来插入一个任务边界,强制浏览器进行渲染。 - **UI 更新任务**:由于任务在 UI 渲染之前执行,因此可以利用任务确保 DOM 更新在下一个渲染周期前完成,例如使用 `Promise.resolve().then()` 来延迟执行某些操作。 ### 示例:任务任务边界 ```javascript console.log("Start"); Promise.resolve().then(() => { console.log("MicroTask 1"); Promise.resolve().then(() => { console.log("Nested MicroTask"); }); }); setTimeout(() => { console.log("MacroTask"); }, 0); console.log("End"); ``` 输出顺序为: ``` Start End MicroTask 1 Nested MicroTask MacroTask ``` 这表明即使在任务中嵌套任务,它们仍会在当前任务结束后全部执行完毕,直到任务队列清空后才会执行下一个任务[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值