深刻理解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视图或者进行下一个宏任务）以前执行。

两个基本原则

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

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

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

补充

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

前情回顾

如今，用事件循环和简单的例子来分析《高性能的JavaScript》中的那句话。 需求：给包含1000个数字的数组中的每一个元素取绝对值（假设对一个数字进行需求操做耗时1ms）。

状况1（不使用定时器）: 因为JavaScript主线程代码属于宏任务的一种，因此一次事件循环须要处理1000个数字，因此1s事件循环才进行到UI更新阶段，可是因为耗时过长，UI状态不会被更新，页面出现卡顿甚至堵塞。

状况2（使用定时器）： 将一次处理1000个数字的任务分割为20个每次处理50个数字的任务。因为定时器是宏任务的一种，因此一次事件循环只处理50个数字，因为此时微任务队列为空，因此50ms后事件循环进行到UI更新阶段，而后根据状况进行UI渲染，页面未出现卡顿或者堵塞。

固然，若是只是单纯的处理数据，咱们能够考虑使用Web Workers。

总结

1. JavaScript是单线程的，同一时刻是只能执行一个任务。
2. 事件循环包含一个宏任务队列和至少一个微任务队列。事件循环一次迭代，至多执行一个宏任务可是会执行完全部的微任务。
3. Web应用越复杂，积极主动管理UI线程就越重要，即便JavaScript代码很重要，也不能影响用户体验。

参考

1. 《High Performance JavaScript》
2. 《Secrets of the JavaScript Ninja》
3. 《HTML 5.2》