JavaScript事件循环机制及微任务与宏任务

事件循环

事件循环不仅仅包含事件队列，而是具有至少两个队列，除了事件，还要保持浏览器执行的其他操作。这些操作被称为任务，并且分为两类：宏任务（或通常称为任务）和微任务。
单次循环迭代中，最多处理一个宏任务（其余的在队列中等待），而队列中的所有微任务都会被处理。当微任务队列处理完成并清空时，事件循环会检查是否需要更新UI渲染，如果是，则会重新渲染UI视图。至此，当前事件循环结束。

事件循环基于两个基本原则：
一次处理一个任务。
一个任务开始后直到运行完成，不会被其他任务中断。

两类任务队列都是独立于事件循环的，这意味着检测和添加任务的行为，是独立于事件循环完成的。
因为JavaScript基于单线程执行模型，所以这两类任务都是逐个执行的。当一个任务开始执行后，在完成前，中间不会被任何其他任务中断。除非浏览器决定中止执行该任务，例如，某个任务执行时间过长或内存占用过大。
所有微任务会在下一次渲染之前执行完成，因为它们的目标是在渲染前更新应用程序状态。
浏览器通常会尝试每秒渲染60次页面，以达到每秒60帧（60 fps）的速度。在页面渲染时，任何任务都无法再进行修改。如果想要实现平滑流畅的应用，，单个任务和该任务附属的所有微任务，都应在16ms内完成。

宏任务

宏任务的例子很多，包括创建主文档对象、解析HTML、执行主线（或全局）JavaScript代码，更改当前URL以及各种事件，如页面加载、输入、网络事件和定时器事件。从浏览器的角度来看，宏任务代表一个个离散的、独立工作单元。运行完任务后，浏览器可以继续其他调度，如重新渲染页面的UI或执行垃圾回收。

常见的宏任务有:setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering.

宏任务场景实例

主线程JavaScript代码执行时间需要15ms。
第一个单击事件处理器需要运行8ms。
第二个单击事件处理器需要运行5ms。

假设用户在代码执行后5ms时单击第一个按钮，随后在12ms时单击第二个按钮。

执行情况：
1、[0ms]执行主线程
2、[5ms]第一个单击事件加入队列，不影响主线程
3、[12ms]第二个单击事件加入队列，不影响主线程
4、[15ms]主线程结束，从队列中移除。执行第一个单击事件
5、[23ms]第一个单击事件结束，从队列中移除。执行第二个单击事件
6、[28ms]第二个单击事件结束，从队列中移除。队列为空

微任务

而微任务是更小的任务。微任务更新应用程序的状态，但必须在浏览器任务继续执行其他任务之前执行，浏览器任务包括重新渲染页面的UI。微任务的案例包括promise回调函数、DOM发生变化等。微任务需要尽可能快地、通过异步方式执行，同时不能产生全新的微任务。微任务使得我们能够在重新渲染UI之前执行指定的行为，避免不必要的UI重绘，UI重绘会使应用程序的状态不连续。

常见的微任务有:process.nextTick, Promises, Object.observe, MutationObserver。
许多框架底层都有它的痕迹。比如在Vue2.4之前中，Vue.$nextTick()中将回调存储在微任务中。

微任务场景实例

主线程JavaScript代码执行时间需要15ms。
第一个单击事件处理器需要运行8ms。
包含立即兑现的promise，并需要运行4ms的传入回调函数。
第二个单击事件处理器需要运行5ms。

假设用户在代码执行后5ms时单击第一个按钮，随后在12ms时单击第二个按钮。

执行情况：
1、[0ms]执行主线程
2、[5ms]第一个单击事件加入队列，不影响主线程
3、[12ms]第二个单击事件加入队列，不影响主线程
4、[15ms]主线程结束创建但不执行第一个单击事件。立即兑现promise，进入微任务队列。
5、[23ms]从微任务队列挑选任务并执行，检查微任务队列，微任务都执行完毕后。执行第一个单击事件，从队列中移除。
6、[27ms]微任务队列为空，事件循环重新处理宏任务，执行第二个单击事件。
7、[32ms]第二个单击事件结束，从队列中移除。队列为空.

微任务队列中含有微任务，不论队列中等待的其他任务，微任务都将获得优先执行权。

参考文献：
《Secrets of the JavaScript Ninja》
https://html.spec.whatwg.org/multipage/webappapis.html#task-queue

转载于:https://www.cnblogs.com/limbobark/p/10788359.html