事件循环进阶：macrotask与microtask

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

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

 

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

 

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

或者，进一步，JS中分为两种任务类型：macrotask和microtask，在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线程继续接管，开始下一个宏任务（从事件队列中获取）

• 另外，请注意下Promise的polyfill与官方版本的区别：

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

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

  • 请特别注意这两点区别

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

 

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

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

 

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