js宏任务和微任务有哪些,js宏任务和微任务区别

本文详细解析了JavaScript中的宏任务和微任务概念,包括它们的执行时机、顺序、嵌套关系和优先级。通过实例说明,强调了理解这些概念在异步编程中的重要性。

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

大家好,小编为大家解答js为什么要区分宏任务和微任务的问题。很多人还不知道js宏任务和微任务的执行顺序,现在让我们一起来看看吧!

目录

宏任务和微任务的概念

宏任务

微任务

宏任务和微任务示例

宏任务和微任务区别

1.执行时机:

2.执行顺序:

3.嵌套关系:

4.优先级:


宏任务和微任务的概念

在JavaScript中,宏任务(macro task)和微任务(micro task)是用来管理异步操作的概念。

宏任务

宏任务通常包括一些异步操作,例如定时器回调、事件回调(如点击、鼠标移动等)、网络请求等Deepl降重。宏任务会被推到一个任务队列中,并按照先进先出的顺序执行。当主线程空闲时,会从宏任务队列中取出一个任务进行执行。

微任务

微任务则是在当前任务执行结束后立即执行的任务。常见的微任务包括Promise回调和MutationObserver回调。微任务会优先于下一个宏任务执行,即在当前宏任务执行完毕前,所有微任务都会被执行完毕。

 

宏任务和微任务示例

举个例子,假设有以下代码:

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
});

console.log('4');

输出结果将会是:1 -> 4 -> 3 -> 2。

解释如下:

  • 首先执行同步代码,打印出1和4;
  • 然后遇到setTimeout,将其回调函数放入宏任务队列;
  • 然后遇到Promise.resolve().then(),将其回调函数放入微任务队列;
  • 当前宏任务执行完毕,检查微任务队列,发现有一个微任务,执行微任务队列中的回调函数,打印出3;
  • 所有微任务执行完毕,开始下一个宏任务,从宏任务队列中取出setTimeout的回调函数,打印出2。

需要注意的是,当一个宏任务执行过程中产生新的微任务,这些微任务会在当前宏任务执行完之后立即执行。因此,宏任务和微任务的执行顺序是交替进行的。

 

宏任务和微任务区别

它们之间有以下几个区别:

1.执行时机:

宏任务是在主线程空闲时执行的,而微任务是在当前任务执行结束后立即执行的。

2.执行顺序:

宏任务按照先进先出的顺序执行,而微任务则会在下一个宏任务执行前优先执行。

3.嵌套关系:

在一个宏任务中产生的新的微任务,将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。

4.优先级:

微任务具有更高的优先级,它们会在当前宏任务执行完毕前尽早执行,以保证及时更新UI或处理其他紧急任务。这意味着在同一事件循环中,如果有微任务存在,那么它们会被连续执行,直到所有微任务都执行完毕,才会继续执行下一个宏任务。

 

常见的宏任务包括定时器回调、事件回调(如点击、鼠标移动等)、网络请求等。而常见的微任务包括Promise回调、MutationObserver回调等。

理解宏任务和微任务的执行顺序对于处理异步操作、避免阻塞主线程非常重要,能够帮助我们更好地编写高效的JavaScript代码。

### JavaScript 任务任务区别JavaScript 中,任务任务的主要区别在于它们被调度的方式及其执行时机。 #### 任务 (Macro Task) 任务是指那些会被推入到全局的任务队列中的操作。每当一个任务被执行完成之后,在下一个任务开始之前会先处理所有的任务。常见的任务包括但不限于 `setTimeout`、`setInterval` I/O 操作等[^1]。 #### 任务 (Micro Task) 相比之下,任务则是在当前正在运行的任务结束后立即得到执行的机会,直到所有可得的任务都被处理完毕才会继续下一个任务。典型的任务有 `Promise.then()` 方法回调以及由 `async/await` 构造出来的异步函数内部代码块[^2]。 ### 执行顺序 当一段脚本启动时,JavaScript 引擎首先会在调用栈中依次执行同步任务;一旦遇到任何类型的异步任务,则根据其性质分别加入相应的任务队列——即任务队列或任务队列。具体来说: - 当前任务内的所有同步代码被执行; - 接着检查并清空任务队列里的每一项直至为空; - 此过程重复进行,每次从任务队列取出一项作为新的上下文环境下的第一个待办事项,并在其前后都给予任务优先级较高的待遇[^3]。 为了更直观地展示这一流程,下面给出了一段简单的示例代码来观察任务任务之间的交互行为: ```javascript console.log('Script start'); setTimeout(() => { console.log('Timeout'); }, 0); new Promise((resolve) => { resolve(); }).then(() => { console.log('Promise resolved'); }); console.log('Script end'); ``` 这段程序将会按照如下顺序打印日志消息: 1. Script start 2. Script end 3. Promise resolved 4. Timeout 这是因为尽管设置了延迟时间为零秒 (`0`) 的计时器(`setTimeout`),但由于它是属于任务范畴内的一项工作,所以即便设定的时间已经到达也必须等到本轮事件循环周期结束且所有现存任务完成后才能真正获得执行机会。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值