前面在渲染的各个阶段讲到了当前阶段内可做的优化，本文综合一下。
页面三个阶段
加载阶段、交互阶段和关闭阶段，只要关注点在于前两个阶段。
加载阶段
- 从发起请求到页面呈现出来。
- 性能因素为网络和JS脚本。
交互阶段
- 从页面呈现出来到交互操作的过程。
- 性能因素为JS脚本。
关闭阶段
包含用户关闭页面后浏览器所做的清除操作，和用户体验关系不大。
加载阶段
- 从渲染流水线得知，影响首次渲染的主要因素为：外部依赖文件的下载及对其他渲染任务的阻塞。
- 阻塞页面首次渲染的外部文件称为关键资源，如：CSS文件、JS文件。图片、视频等不在其中。
影响页面首次渲染的因素
依据关键资源展开。
- 关键资源的数量。
- 关键资源的大小。
- 请求关键资源所需的RTT（TCP传输中一个数据报发出到收到接收确认，所经历的时间），请求资源在时间上是重叠的，计算最大资源所需RTT即可。
优化方案
依据上述因素，总的优化原则为减小关键资源数量、压缩关键资源大小和降低关键资源请求RTT次数。
减小关键资源数量
- 将小的外联文件改为内嵌式。
- 引入CSS文件时加入媒体查询。
- 引入JS文件时采用异步加载（关键字：defer、async）。
压缩关键资源大小
- 使用打包工具插件对文件进行压缩。
- 去掉文件注释。
降低关键资源请求RTT次数
- 通过减小关键资源数量和减小关键资源大小相配合实现。
- 通过CDN加速降低RTT时长。
交互阶段
- 交互阶段不需加载外部资源。
- 会有JS触发的DOM、样式变化以及CSS变换，需要渲染新的帧。
- 交互阶段优化即为渲染帧速度的优化。
优化方案
减少JS执行时间
js执行时间过长时会阻塞主线程，导致其他渲染任务不能尽快执行。
- 将大的JS任务划分为多个小任务。
- 使用web worker执行耗时的无DOM操作的任务。
避免强制同步布局
正常的布局
- 通过DOM接口添加或删除元素后会重新进行样式的计算、布局。
- 正常情况下，为不阻塞主线程，所需的样式计算、布局、节点的增删会在另外的任务中异步完成。
强制同步布局
JS将上述的样式计算、布局强制加入当前任务中执行。
触发条件
在对DOM进行增删后，操作DOM相关值，为保证值的准确性，会立刻执行更新任务。
所以须避免在DOM增删后操作DOM相关值。
避免布局抖动
避免在一次JS执行中频繁的触发强制同步布局和抖动。
善用CSS动画
- CSS动画性能更好且不受主线程影响，尽量使用CSS动画。
- 使用CSS动画时善用
will-change字段。
避免频繁的垃圾回收
- 频繁创建局部对象会引发频繁的垃圾回收。
- 垃圾回收任务在主线程执行，可能会阻塞其他任务。
