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

阅读总结，尽量简短，没事看一眼。
渲染过程

JS 处理
- JS 对 DOM CSSOM 的处理
样式计算
- 解析 CSS 计算每一个元素的最终样式
页面布局
- 样式计算结束后，开始计算每个元素的宽高、坐标
绘制
- 布局计算结束后，就可以开始绘制元素了，包括文本、颜色、边框、阴影、图像等
【渲染进程各处理过程的优化点】合成
- 根据元素的顺序进行图层合成

布局和绘制这两个过程是有可能跳过的，因为并不是所有的操作都会引发布局和绘制。
下面是一个 CSS 属性与布局、绘制、合成的触发关系

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

吐槽一下感觉 Gecko 还挺厉害。
样式计算优化

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

布局与重绘优化布局又叫重排、回流，这里要知晓这两个也是指的布局这个渲染过程。
触发重排的操作：

修改 DOM 元素的几何属性
- width、height
- padding、margin
- left、top
修改 DOM 树的结构
- 增加 DOM 元素
- 移动 DOM 元素
- 删除 DOM 元素
获取 DOM 元素的即使布局属性
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- clientWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- window.getComputedStyle()

这可能更多的是对上面表格的一个补充，不过当前的角度是针对“操作”而言，上面的更多的
是针对样式而言，那么既然知道了此类操作会导致页面的回流，就应该更加谨慎的对他们进
行操作。
一个不错的方案是对 DOM 元素的几何属性的修改应该打包操作，不推荐逐条修改
el.style.top = '...' 之类的操作，应该考虑使用添加类来进行打包操作。
绘制性能评估可以使用 chrome 的 More tools -> Rendering 来进行绘制性能的评估。
合成影响合成性能的因素会有两个：

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

使用 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 （合成阶段）的动画包括如下：