依次执行微任务
,执行完成才去执行下一个宏任务。在浏览器端,其可以理解为该任务执行完后,在下一个macrotask执行开始前,浏览器可以进行页面渲染。触发macrotask任务的操作包括:dom事件回调,ajax回调,定时器回调 script(整体代码) setTimeout、setInterval、setImmediate I/O、UI交互事件 postMessage、MessageChannel
可以理解为在macrotask任务执行后,页面渲染前立即执行的任务。触发microtask任务的操作包括: Promise回调:Promise.then Mutation回调:MutationObserver process.nextTick(Node环境)
setTimeout(() => { // 会立即放入宏列队
console.log('timeout callback1()')
// 每次准备取出第一个宏任务执行前,都要将所有的微任务一个一个取出来执行
Promise.resolve(3).then(
value => { // 会立即放入微列队
console.log('Promise onResolved3()', value)
}
)
}, 0)
setTimeout(() => { // 会立即放入宏列队
console.log('timeout callback2()')
}, 0)
Promise.resolve(1).then(
value => { // 会立即放入微列队
console.log('Promise onResolved1()', value)
}
)
Promise.resolve(2).then(
value => { // 会立即放入微列队
console.log('Promise onResolved2()', value)
}
)
依次输出
可能存在的问题 如果一个Microtask队列太长,或者执行过程中不断加入新的Microtask任务,会导致下一个Macrotask任务很久都执行不了。结果就是,你可能会遇到UI一直刷新不了,或者I/O任务一直完成不了。 或许是考虑到了这一点,Microtask queue中的process.nextTick任务,是被设置了(在一个事件循环中的)最大调用次数process.maxTickDepth的,默认是1000。一定程度上避免了上述情况。