JS → style → layout → paint → composite

提升性能需要在构造流水线中每个元素都需要注意:

Style

  • 降低样式选择器的复杂度.
  • 减少需要执行样式计算的元素的个数

Layout

尽可能避免触发布局.

几乎所有的布局都是在整个文档范围内发生的.

尽量使用flexbox布局

Paint

  • 除了 transform 和 opacity之外 任何属性的修改都会触发绘制.
  • 提升移动或者渐变元素的绘制层
  • 减少绘制区域
  • 简化绘制的复杂度

CSS 选择器性能

• 一个选择器的最右端是这个选择器的关键条件(Key Selector) • 浏览器按照从右向左的方式匹配选择器,因此应该将更具体的条件尽可能放在右端。 • 避免使用*规则 • 选择器尽可能短 • ID选择符前面不要再加限定符 • 没必要用Tag选择符限定Class选择符