zoukankan      html  css  js  c++  java
  • 事件循环进阶:macrotask与microtask

    这段参考了参考来源中的第2篇文章(英文版的),(加了下自己的理解重新描述了下),

    这里没法给大家演示代码,我就简单说下我的理解吧。

    promise和settimeout 在一起的时候执行顺序是个有意思的事儿,

    为什么呢?因为Promise里有了一个一个新的概念:microtask

    或者,进一步,JS中分为两种任务类型:macrotaskmicrotask,在ECMAScript中,microtask称为jobs,macrotask可称为task

     

    它们的定义?区别?简单点可以按如下理解:

    • macrotask(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

      • 每一个task会从头到尾将这个任务执行完毕,不会执行其它

      • 浏览器为了能够使得JS内部task与DOM任务能够有序的执行,会在一个task执行结束后,在下一个 task 执行开始前,对页面进行重新渲染

    (`task->渲染->task->...`)
    • microtask(又称为微任务),可以理解是在当前 task 执行结束后立即执行的任务

      • 也就是说,在当前task任务后,下一个task之前,在渲染之前

      • 所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染

      • 也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)

    分别很么样的场景会形成macrotask和microtask呢?

    • macrotask:主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个macrotask)

    • microtask:Promise,process.nextTick等

    __补充:在node环境下,process.nextTick的优先级高于Promise__,也就是可以简单理解为:在宏任务结束后会先执行微任务队列中的nextTickQueue部分,然后才会执行微任务中的Promise部分。

    再根据线程来理解下:

      • macrotask中的事件都是放在一个事件队列中的,而这个队列由事件触发线程维护

      • microtask中的所有微任务都是添加到微任务队列(Job Queues)中,等待当前macrotask执行完毕后执行,而这个队列由JS引擎线程维护(这点由自己理解+推测得出,因为它是在主线程下无缝执行的)

    所以,总结下运行机制:

      • 执行一个宏任务(栈中没有就从事件队列中获取)

      • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中

      • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)

      • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染

      • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

    • 另外,请注意下Promisepolyfill与官方版本的区别:

      • 官方版本中,是标准的microtask形式

      • polyfill,一般都是通过setTimeout模拟的,所以是macrotask形式

      • 请特别注意这两点区别

      注意,有一些浏览器执行结果不一样(因为它们可能把microtask当成macrotask来执行了),
      但是为了简单,这里不描述一些不标准的浏览器下的场景(但记住,有些浏览器可能并不标准)

    好了,到这里咱们这个从浏览器到多进程到多线程到js单线程到js运行机制就讲完了。内容还算是比较全面,不足的就是只能听么有代码参考。

    不过没关系,大家可以根据我提到的知识点自己再进行深入的学习,或者关注下我个人的公众号-重度前端,我讲的内容都有文字版在上面而且有代码,另外我记录了一些我平时看到的比较好的 有深度的文章,还有一些原创内容。直接微信 搜 重度前端。 

    好了,今天就到这里了。后面计划下分享哪些有意思的东西,咱们下次见。

  • 相关阅读:
    vue自定义指令
    ZOJ Problem Set–2104 Let the Balloon Rise
    ZOJ Problem Set 3202 Secondprice Auction
    ZOJ Problem Set–1879 Jolly Jumpers
    ZOJ Problem Set–2405 Specialized FourDigit Numbers
    ZOJ Problem Set–1874 Primary Arithmetic
    ZOJ Problem Set–1970 All in All
    ZOJ Problem Set–1828 Fibonacci Numbers
    要怎么样调整状态呢
    ZOJ Problem Set–1951 Goldbach's Conjecture
  • 原文地址:https://www.cnblogs.com/crith/p/9961349.html
Copyright © 2011-2022 走看看