JS中的宏任务和微任务

宏任务(macrotask )和微任务(microtask )

宏任务和微任务都是我们在开发工作中经常用到的。
(宏任务(macrotask )和微任务(microtask )

macrotask 和 microtask 表示异步任务的两种分类。

在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。

在这里插入图片描述
其实并不止一个消息队列,有异步队列和事件队列,而事件队列总是优先于异步队列被空闲下来的JS线程取用

宏任务一般是:包括整体代码script,setTimeout,setInterval、I/O、UI render。
微任务主要是:Promise、Object.observe、MutationObserver。

区别Promise在前,setTimeout在后:

new Promise((resolve) => {
    console.log('外层宏事件2');
    resolve()
}).then(() => {
    console.log('微事件1');
}).then(()=>{
    console.log('微事件2')
})
console.log('外层宏事件1');
setTimeout(() => {
    //执行后 回调一个宏事件
    console.log('内层宏事件3')
}, 0)
外层宏事件2
外层宏事件1
微事件1
微事件2
内层宏事件3

setTimeout在前,Promise在后:

setTimeout(() => {
    //执行后 回调一个宏事件
    console.log('内层宏事件3')
}, 0)
console.log('外层宏事件1');

new Promise((resolve) => {
    console.log('外层宏事件2');
    resolve()
}).then(() => {
    console.log('微事件1');
}).then(()=>{
    console.log('微事件2')
})
外层宏事件1
外层宏事件2
微事件1
微事件2
内层宏事件3

浏览器环境:
浏览器环境下的 异步任务 分为 宏任务(macroTask) 和 微任务(microTask):
宏任务(macroTask):script 中代码、setTimeout、setInterval、I/O、UI render;
微任务(microTask): Promise、Object.observe、MutationObserver。
当满足执行条件时,宏任务(macroTask) 和 微任务(microTask) 会各自被放入对应的队列:宏队列(Macrotask Queue) 和 微队列(Microtask Queue) 中等待执行。

Node 环境:

在 Node 环境中 任务类型 相对就比浏览器环境下要复杂一些:
microTask:微任务;
nextTick:process.nextTick;
timers:执行满足条件的 setTimeout 、setInterval 回调;
I/O callbacks:是否有已完成的 I/O 操作的回调函数,来自上一轮的 poll 残留;
poll:等待还没完成的 I/O 事件,会因 timers 和超时时间等结束等待;
check:执行 setImmediate 的回调;
close callbacks:关闭所有的 closing handles ,一些 onclose 事件;
idle/prepare 等等:可忽略。
因此,也就产生了执行事件循环相应的任务队列 Timers Queue、I/O Queue、Check Queue 和 Close Queue。
2.执行过程
浏览器环境
先执行

需要 注意 的是:
在浏览器页面中可以认为初始执行线程中没有代码,每一个

Node 环境
循环之前
在进入第一次循环之前,会先进行如下操作:

同步任务;
发出异步请求;
规划定时器生效的时间;
执行process.nextTick()。

开始循环
循环中进行的操作:
清空当前循环内的 Timers Queue,清空 NextTick Queue,清空 Microtask Queue;
清空当前循环内的 I/O Queue,清空NextTick Queue,清空 Microtask Queue;
清空当前循环内的 Check Queue,清空 NextTick Queue,清空 Microtask Queue;
清空当前循环内的 Close Queue,清空 NextTick Queue,清空Microtask Queue;
进入下轮循环。

可以看出,nextTick 优先级比 Promise 等 microTask 高,setTimeout和setInterval优先级比setImmediate高。
注意
在整个过程中,需要 注意 的是:
如果在 timers 阶段执行时创建了setImmediate 则会在此轮循环的 check 阶段执行,如果在 timers 阶段创建了setTimeout,由于 timers 已取出完毕,则会进入下轮循环,check 阶段创建 timers 任务同理;

setTimeout优先级比setImmediate高,但是由于setTimeout(fn,0)的真正延迟不可能完全为 0 秒,可能出现先创建的setTimeout(fn,0)而比setImmediate的回调后执行的情况。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值