• 事件循环进阶: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运行机制就讲完了。内容还算是比较全面,不足的就是只能听么有代码参考。

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

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

  • 相关阅读:
    梦断代码,读书计划
    《梦断代码》读后感1
    四则运算2详细过程
    四则运算2初步构思
    四则运算
    阅读《梦断代码》计划
    四则运算2设计思路
    随机输出30道四则运算题
    软件工程阅读计划
    面试题04
  • 原文地址:https://www.cnblogs.com/crith/p/9961349.html
Copyright © 2020-2023  润新知