深入理解JavaScript之Event Loop

前言

最近阅读《高性能JavaScript》时，第六章谈到“通过定时器将JavaScript执行代码的控制权先让给浏览器用于更新UI状态，然后再将控制权交回给JavaScript代码，这样就可以使得页面更为流畅”，就联想到了之前理解的事件循环。

这篇文章就是为了解释为什么这么做可以提升页面的流畅度。

事件循环（Event Loop）

单线程的JavaScript

总所周知，JavaScript语言的一大特点就是单线程，也就是说在一个时间段里，JavaScript只能做一件事情（浏览器是多线程）。 多线程可以实现应用的并行处理，从而以更高的CPU利用率提高整个应用程序的性能和吞吐量。

但是JavaScript却以单线程进行，为什么呢？

JavaScript是浏览器脚本语言，用于与用户交互以及操作DOM。考虑如下情况，如果有两个并发的操作，对同一个DOM节点分别进行删除和修改样式，此时浏览器就无法决定到底采用哪个线程的操作。类似数据库，我们可以采用“锁”来处理并发，但是这会平添复杂度。所以，JavaScript语言没有支持多线程操作。那又考虑这种情况，既然JavaScript是单线程，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行。那么如果用户触发了一个非常耗时的I/O操作，那么按道理后续的所有操作都得等到I/O操作完成后方可进行。但是，事实上，后续的任务不必等待这个耗时的I/O操作完成，原因就是JavaScript与生俱来的异步和回调。

而这背后恰好就是本文的主题——————事件循环

定义

事件循环包含了至少两个任务队列，宏任务队列和微任务队列。

宏任务

宏任务包含创建文档对象、解析HTML、执行主线JavaScript代码、更改当前URL以及各种事件，例如页面加载、输入、网络事件和定时器等等。宏任务运行完成后，浏览器继续其他的任务调度，如重新渲染页面或者垃圾回收。

微任务

微任务包括promise、回调函数、DOM发生变化等。微任务更新应用程序的状态，必须在浏览器任务继续执行其他任务（渲染UI视图或者进行下一个宏任务）之前执行。

两个基本原则

一次处理一个任务
一个任务开始直到运行完成，不会被其他任务中断

无论是宏任务队列还是微任务队列，二者在同一时刻都只执行一个任务，不过二者也有重要的区别： 在一次循环中，最多处理一个宏任务，而微任务队列中所有的微任务都会被处理。

在微任务队列清空后，事件循环会检查当前是否需要重新渲染UI，如果需要则渲染UI视图。

补充

两个任务队列都是独立于事件循环的，这意味着任务队列的添加发生在事件循环外。
所有微任务都会在下一次渲染前完成，目的是在渲染前更新应用程序状态。
浏览器会尝试以每秒渲染60次页面，以达到每秒60帧的速度。所以，一次循环最理想的时间应该不超过16ms。
浏览器完成页面渲染后，进入下一轮事件循环迭代后，可能出现3种情况
1. 如果事件循环执行到“is rendering needed”且浏览器处于另一个16ms结束之前（即浏览器尚未自动触发页面渲染时），浏览器可能不会选择在当前的时间循环中执行更新UI操作，因为更新UI是一个复杂且耗性能的操作。
2. 如果事件循环执行到“is rendering needed”且浏览器刚好离上一次渲染16ms左右时（即浏览器即将自动触发页面渲染时），此时浏览器会进行UI更新。
3. 执行下一个事件循环耗时超过16ms，浏览器将无法以目标帧率重新渲染页面，且UI无法被更新。如果延迟不大是很难察觉到，但是，如果有非常耗时的操作，这个时候用户会觉得网页十分卡顿，甚至浏览器会提示“无响应脚本”。