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

浏览总结，尽量简短，没事看一眼。

渲染过程

1. JS 解决

   • JS 对 DOM CSSOM 的解决

2. 款式计算

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

3. 页面布局

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

4. 绘制

   • 布局计算完结后，就能够开始绘制元素了，包含文本、色彩、边框、暗影、图像等

5. 合成

   • 依据元素的程序进行图层合成

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

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

吐槽一下感觉 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 这俩会有性能上的收益。

能够应用 chrome 的 More tools -> Layers 来查看站点的图层信息。