页面性能：如何系统地优化页面？

通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。

加载阶段

影响页面首次渲染的核心因素：

1. 关键资源个数 关键资源个数越多，首次页面的加载时间就会越长。比如上图中的关键资源个数就是 3 个，1 个 HTML 文件、1 个 JavaScript 和 1 个 CSS 文件。
2. 关键资源大小 通常情况下，所有关键资源的内容越小，其整个资源的下载时间也就越短，那么阻塞渲染的时间也就越短。
3. 请求关键资源需要多少个 RTT（Round Trip Time） RTT 就是这里的往返时延。它是网络中一个重要的性能指标，表示从发送端发送数据开始，到发送端收到来自接收端的确认，总共经历的时延。

总的优化原则就是减少关键资源个数，降低关键资源大小，降低关键资源的 RTT 次数。

交互阶段

1. 减少JavaScript脚本执行时间
2. 避免强制同步布局
   同步布局：JavaScript强制将计算样式和布局操作提前到当前的任务中。
3. 避免布局抖动
   布局抖动：在一段JavaScript代码中，反复执行布局操作。
4. 合理利用CSS合成动画
   合成动画是直接在合成线程上执行的，这和在主线程上执行的布局、绘制等操作不同，如果主线程被JavaScript或者一些布局任务占用，CSS动画依然能继续执行。所以要尽量利用好CSS合成动画，如果能让CSS处理动画，就尽量交给CSS来操作。
5. 避免频繁的垃圾回收垃圾回收操作发生时，会占用主线程，从而影响其他任务的执行，严重的话还会让用户产生掉帧、不流畅的感觉。

总结

在加载阶段，核心的优化原则是：优化关键资源的加载速度，减少关键资源的个数，降低关键资源的RTT次数。
在交互阶段，核心的优化原则是：尽量减少一帧的生成时间。可以通过减少单词JavaScript的执行时间、避免强制同步布局、避免布局抖动、尽量采用CSS的合成动画、避免频繁的垃圾回收等方式来减少一帧生成的时长。