渲染进程各处理过程的优化点

阅读总结，尽量简短，没事看一眼。

渲染过程

1. JS 处理

   • JS 对 DOM CSSOM 的处理

2. 样式计算

   • 解析 CSS 计算每一个元素的最终样式

3. 页面布局

   • 样式计算结束后，开始计算每个元素的宽高、坐标

4. 绘制

   • 布局计算结束后，就可以开始绘制元素了，包括文本、颜色、边框、阴影、图像等

5. 合成

   • 根据元素的顺序进行图层合成

布局和绘制这两个过程是有可能跳过的，因为并不是所有的操作都会引发布局和绘制。

下面是一个 CSS 属性与布局、绘制、合成的触发关系

属性	Blink	Gecko	Webkit
z-index	绘制/合成	绘制/合成	布局/绘制/合成
transform	合成	合成	布局/绘制/合成
opacity	绘制/合成	合成	布局/绘制/合成
min-width	布局/绘制/合成	布局/合成	布局/绘制/合成
color	布局/绘制	布局/绘制	布局/绘制/合成
background	布局/绘制	布局/绘制	布局/绘制/合成
border-radius	布局/绘制	布局/绘制	布局/绘制/合成
border-style	布局/绘制/合成	布局/绘制/合成	布局/绘制/合成
border-width	布局/绘制/合成	布局/绘制/合成	布局/绘制/合成

吐槽一下感觉 Gecko 还挺厉害。

样式计算优化

1. 减少匹配的元素数量，尽量不要使用 * {}
2. 降低选择器复杂度，尽可能的使用单一精准的类选择器
3. 使用 BEM 规范（BLock、Element、Modifier），例如：.banner\_\_header_size-3 {}

布局与重绘优化

布局又叫重排、回流，这里要知晓这两个也是指的布局这个渲染过程。

触发重排的操作：

1. 修改 DOM 元素的几何属性

   • width、height
   • padding、margin
   • left、top

2. 修改 DOM 树的结构

   • 增加 DOM 元素
   • 移动 DOM 元素
   • 删除 DOM 元素

3. 获取 DOM 元素的即使布局属性

   • offsetWidth、offsetHeight、offsetTop、offsetLeft
   • clientWidth、offsetHeight、offsetTop、offsetLeft
   • scrollWidth、scrollHeight、scrollTop、scrollLeft
   • window.getComputedStyle()

这可能更多的是对上面表格的一个补充，不过当前的角度是针对“操作”而言，上面的更多的
是针对样式而言，那么既然知道了此类操作会导致页面的回流，就应该更加谨慎的对他们进
行操作。

一个不错的方案是对 DOM 元素的几何属性的修改应该打包操作，不推荐逐条修改
el.style.top = '...' 之类的操作，应该考虑使用添加类来进行打包操作。

绘制性能评估

可以使用 chrome 的 More tools -> Rendering 来进行绘制性能的评估。

合成

影响合成性能的因素会有两个：

1. 所需合成的图层数量
2. 实现动画的相关属性

使用 will-change 可以通过创建新的图层起到绘制区域最小化的优化
，chrome、firefox、opera 可以通过设置

.layer {
    will-change: transform;
}

来达到新增一个图层的目的；然而 safari 不支持 will-change，所以需要使用变通的办
法来创建一个图层

.layer {
    transform: translate(0);
}

但别忘啦！图层数量过多也是导致合成性能低下的原因之一，所以请不要滥用
will-change。

那么对于 will-change 而言，哪些 css 属性可以受益呢？

上面也提到了 will-change 是针对合成阶段的优化处理，那么非合成阶段的 css 动画属
性对 will-change 而言并不会带来性能上的提升。

适用于 will-change （合成阶段）的动画包括如下：

动画效果	will-change 值
变换	transform
透明	opacity

啥意思？就是说也就 will-change 这俩会有性能上的收益。

可以使用 chrome 的 More tools -> Layers 来查看站点的图层信息。