【Day09】JavaScript 为什么要区分微任务和宏任务

本文深入探讨JavaScript中的微任务和宏任务,解释它们在EventLoop中的执行顺序及其重要性。理解这一机制对于优化代码执行和实现及时响应至关重要。微任务在当前宏任务结束后立即执行,而在下一个EventLoop开始前清空所有微任务。这种设计允许开发者在下一次EventLoop之前插入紧急任务,确保关键状态的同步更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript 为什么要区分微任务和宏任务

区分微任务和宏任务是为了将异步队列任务划分优先级,通俗的理解就是为了插队。

一个 Event Loop,Microtask 是在 Macrotask 之后调用,Microtask 会在下一个 Event Loop 之前执行调用完,并且其中会将 Microtask 执行当中新注册的 Microtask 一并调用执行完,然后才开始下一次 Event Loop,所以如果有新的 Macrotask 就需要一直等待,等到上一个 Event Loop 当中 Microtask 被清空为止。由此可见,我们可以在下一次 Event Loop 之前进行插队。

如果不区分 MicrotaskMacrotask,那就无法在下一次 Event Loop 之前进行插队,其中新注册的任务得等到下一个 Macrotask 完成之后才能进行,这中间可能你需要的状态就无法在下一个 Macrotask 中得到同步。

JavaScript中,任务任务是两种不同类型的任务,它们在事件循环中的处理方式有所不同。理解它们的工作原理对于编写高效的异步代码非常重要。 ### 任务(Microtasks) 任务是在当前任务结束后立即执行的任务。它们通常用于处理那些需要尽快完成的任务。常见的任务包括: - Promise的回调 - `process.nextTick`(Node.js) - `MutationObserver`(浏览器) ### 任务(Macrotasks) 任务是在事件循环的下一个周期执行的任务。它们通常用于处理那些不需要立即完成的任务。常见的任务包括: - `setTimeout` - `setInterval` - `setImmediate`(Node.js) - I/O操作 ### 示例代码 以下是一个简单的示例,展示了任务任务的使用: ```javascript console.log('Start'); setTimeout(() => { console.log('Timeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('End'); ``` ### 代码解释 1. `console.log('Start');`:立即执行,输出 `Start`。 2. `setTimeout(() => { console.log('Timeout'); }, 0);`:创建一个任务,延迟0毫秒执行,输出 `Timeout`。 3. `Promise.resolve().then(() => { console.log('Promise'); });`:创建一个任务,输出 `Promise`。 4. `console.log('End');`:立即执行,输出 `End`。 ### 执行顺序 根据事件循环的规则,任务会在当前任务执行完毕后立即执行。因此,执行顺序如下: 1. `Start` 2. `End` 3. `Promise` 4. `Timeout` ### 总结 - 任务在当前任务执行完毕后立即执行,优先级高于任务。 - 任务在事件循环的下一个周期执行,优先级低于任务
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值