javascript微任务履行 (js中宏任务和微任务)

浏览器是多进程的,js 是由单线程履行的,下面内容需求事件循环的知识,关注我,每天更新技术干货

macro-task (宏)包括:

  • script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task (微)包括:

  • process.nextTick, Promises, Object.observe, MutationObserver

注意: setTimeout 有延迟,最少是 4ms

宏任务队列有多个,之间有优先级,优先级高的优先履行,一次事件循环履行一个宏任务。

微任务队列只有一个,一次事件循环中全部履行完毕

履行一个宏任务,然后履行该宏任务期间添加的所有微任务,然后履行一次 UI 渲染。然后再履行一个宏任务,以此往复。

js中微任务有哪些,javascript微任务履行

宏任务多个队列对应的数据源:

  • I/O
  • 网络
  • UI 渲染
  • 定时器
  • Promise

接下来看几个例子:

js中微任务有哪些,javascript微任务履行

Node 环境履行

输出结果:

js中微任务有哪些,javascript微任务履行

首先输出:

main1

Promise 中的函数也是属于同步代码,后面 then 中的才属于异步代码,所以继续输出:

promise

然后输出:

main2

setTimeout 属于下一个宏任务,所以先履行所有该期间微任务。

注意 process.nextTick 优先级比 promise 高(Node 环境),所以先输出:

process.nextTick1

然后输出:

promise then

然后履行下一个宏任务和其期间添加的微任务,即输出:

setTimeout

process.nextTick2

再看一个示例:

js中微任务有哪些,javascript微任务履行

输出结果:

js中微任务有哪些,javascript微任务履行

和你预测的一样吗?