渲染优化

1.布局和绘制

• 渲染树只包含网页需要的节点
• 布局计算每一个节点精准的位置和大小（盒模型）
• 绘制是像素化每一个节点的过程

2.回流

• 当render tree中的一部分（或者全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称作回流。
• 当页面布局和几何属性改变时就需要回流。

3.重绘

• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不影响布局。这就叫重绘。

回流必将引起重绘，而重绘不一定会引起回流

4. 复合线程（composition thread）和图层

• 复合线程：将页面拆分成图层进行绘制再进行复合

• 利用DevTools了解网页的图层拆分情况

• 哪些样式仅影响复合

  1.transform:translate()

  2.ransform:scale()

  3.ransform:rotation()

  4.opacity

  ==可利用willchang css属性创建图层==

5. 避免重绘和回流的方法

• 将频繁重绘回流的DOM元素单独作为一个独立图层，那么这个DOM元素的重绘和回流的影响只会在这个图层中。（但是过多的图层的合成非常消耗运算量）
• Chrome创建图层的条件
  1. 3D或者透视变换css属性（perspective transform）
  2. 使用加速视频解码的节点
  3. 拥有3D(WebGL)上下文或加速度的2D上下文节点
  4. 混合插件（Flash）
  5. 对自己的opacity做css动画或者使用一个动画webkit变换元素
  6. 拥有加速css过滤器的元素
  7. 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该元素在自己的层里）
  8. 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
• 避免使用触发重绘和回流的css属性
• 将重绘和回流的影响范围限制在单独的图层之内
• 实战优化点
  1. 用translate替代top的改变（translate不会触发layout）
  2. 用opacity代替visibility（visibility会触发重绘，opacity不会）
  3. 不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className
  4. 把DOM离线后修改，比如：先把DOM给display：none（有一次reflow），然后你修改了100次，然后在显现出来
  5. ==不要把DOM节点的属性值放在一个循环里当成循环里的一个变量==
  6. 不要使用table布局，可能很小的一个改动就会造成这个table的重新布局
  7. 动画实现速度的选择
  8. 对于动画新建图层
  9. 启用GPU硬件加速