理解 Events Loop 宏任务微任务

2023-03-16,,

在 JavaScript 中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask)。

MacroTask(宏任务)

script全部代码、setTimeoutsetIntervalI/OUI Rendering

MicroTask(微任务)

Process.nextTick(Node独有)PromiseObject.observe(废弃)MutationObserver

具体步骤:

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务队列是否为空,如果为空的话,就执行宏任务,否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务后,设置微任务队列为null,然后再执行宏任务,如此循环。
当 macro-task 出队时,任务是一个一个执行的;而 micro-task 出队时,任务是一队一队执行的。因此,我们处理 micro 队列这一步,会逐个执行队列中的任务并把它出队,直到队列被清空。

setTimeout(()=>{
console.log('timer1')
Promise.resolve().then(function() {
console.log('promise1')
})
}, 0)
setTimeout(()=>{
console.log('timer2')
Promise.resolve().then(function() {
console.log('promise2')
})
}, 0)

浏览器端运行结果:timer1=>promise1=>timer2=>promise2

浏览器端的处理过程如下:

Node 与浏览器的 Event Loop 是有差异的,我们通常讨论的都是浏览器中的。

上面同样的代码,Node 端运行结果:timer1=>timer2=>promise1=>promise2

Node 端的处理过程如下:

理解 Events Loop 宏任务微任务的相关教程结束。

《理解 Events Loop 宏任务微任务.doc》

下载本文的Word格式文档,以方便收藏与打印。