JS 事件循环 同步任务 + 异步任务(宏任务 + 微任务)

JS代码中的各个任务分类如下:
(序号.任务类别:执行机制)

  1. 同步任务:放入主线程直接执行
  2. 异步任务
    1. 微任务:放到微任务队列,等待主线程执行完步。
    2. 宏任务:放到宏任务队列,等待主线程执行完毕,执行并清空微任务队列后,执行。

!:首次执行微任务之前一定执行完了主线程的js代码,即第一个宏任务,所以应该说是在宏任务后执行所有微任务队列队列中的微任务。
宏任务:
1. 整体script代码
2. setImmediate、setTimeout、setInterval
3. new Promise().resolve()
4. DOM 事件回调
5. ajax请求结束后的回调
6. I/O
7. UI rendering。

微任务(优先级按从高到低):
1. process.nextTick
2. Promise.then()
3. MutationObserver(DOM事件监听)

宏任务队列微任务队列
setTimeoutpromise.then
new Promise.resolve()preomise.then

执行主线程时会将同步任务一次性完成(主线程的js代码就是第一个宏任务),然后清空微任务队列,然后取一个宏任务执行,然后如果又有了微任务,继续清空微任务队列。

例子:

console.log("同步任务-直接执行");

setTimeout(() => {
	console.log("timeout-宏任务,放入了宏任务队列,在此执行之前一定清空了微任务队列");
}, 0)

new Promise((resolve, reject) => {
	console.log("new Promise.resolve()-是同步任务-直接执行")
	resolve()
}).then(() => {
	console.log("then1-微任务,放入微任务队列,会在下一个宏任务执行前执行")
}).then(() => {
	console.log("then2-微任务,放入为任务队列,会在上一个then1之后执行")
})

console.log("同步任务-直接执行")

// 输出
// 同步任务-直接执行
// new Promise.resolve()-是同步任务-直接执行
// 同步任务-直接执行
// then1-微任务,放入微任务队列,会在下一个宏任务执行前执行
// then2-微任务,放入为任务队列,会在上一个then1之后执行
// timeout-宏任务,放入了宏任务队列,在此执行之前一定清空了微任务队列
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值