TODO:如何编写高效 CSS

浏览器在页面渲染的过程是解析 DOM 和 CSS 生成 DOM Tree 和 CSS Tree 加工生成 Render Tree 进行渲染，浏览器选择器和 dom 结构匹配的过程是 CSS 优化的主要方向，另外浏览器解析选择器的时候是从右到左以此匹配，所以需要注意以下点：

Render Tree 生成

1. 尽量使用简单的选择器，减少嵌套
2. 所以在最右边尽量使用优先级高的选择器，但是要注意使用 ID 选择器，因为不利于代码维护

绘制

浏览器绘制过程：

1. 分层(layer)：获取 Render Tree 后分割成多个层，分层条件：
   1. 3D 转换perspective或transform
   2. 对 opacity 做 css 动画
   3. CSS filter
   4. <video />、<canvas />、Flash、节点
   5. 覆盖在其它层之上
2. 计算：对每个层的元素计算样式结果
3. Layout：为每个节点生成图形和位置
4. Paint：绘制节点
5. 每个图层的绘制内容上传到 GPU
6. Composite：GUP 进行图层重组，组合多个图层到页面上形成最终图像到屏幕

在绘制过程中主要的耗时是在 Layout/Reflow 和 Paint/Repaint 两个过程，所以要注意：

1. 减少高开销 CSS 属性使用，如box-shadow、transforms、border-radius、css filters等
2. 在 UI 交互过程中尽量减少重绘和重排，合理降低 CSS 属性影响范围
3. 为动画元素使用绝对定位，为动画开启 GPU 加速

GUP 加速是指将需要运行动画的元素单独提升到一个独立的层(layer)，这样就可以降低这个元素的动画的影响范围，避免整体的重绘和重流，将原先的浏览器使用 CPU 绘制位图来实现的动画效果转为让 GPU 使用图层合成（composite）来实现。可以使用transform、opacity、filter或者will-change触发形成独立的层，另外 layer 本身也是有内存和 GPU 消耗的，要合理使用。

.layer {
  transform: translateZ(0);
  will-change: all;
}

TODO:复合图层和硬件加速