JavaScript 之 宏任务,微任务

作者: 赵永盛 | 来源:发表于2019-06-12 22:48 被阅读108次

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

  • macro-task (宏)包括:
    script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
  • micro-task (微)包括:
    process.nextTick, Promises, Object.observe, MutationObserver

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

宏任务队列有多个,之间有优先级,优先级高的优先执行,一次事件循环执行一个任务。所以是一次事件循环中选择其中一个优先级高的队列的一个宏任务执行
微任务队列只有一个,一次事件循环中全部执行完毕

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


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

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

接下来看几个例子:


输出结果:


首先输出
main1
Promise 中的函数也是属于同步代码,后面 then 中的才输出异步代码,所以继续输出
promise
然后输出
main2
setTimeout 属于下一个宏任务,所以先执行所有该期间微任务。
注意 process.nextTick 优先级比 promise 高,所以先输出
process.nextTick1
然后输出
promise then
然后执行下一个宏任务和其期间添加的微任务,即输出
setTimeout
process.nextTick2

再看一个示例:


输出:



和你预测的一样吗?

相关文章

网友评论

    本文标题:JavaScript 之 宏任务,微任务

    本文链接:https://www.haomeiwen.com/subject/bicdfctx.html