重绘与回流

Css性能让javascript变慢？

对，两个线程互锁

回流：当Render tree中的一部分以为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）

重绘：不影响布局，只影响元素的外观比如更改背景颜色。

回流必定引起重绘，重绘不一定引起回流

我们要优化的一个点，就是避免使用触发重绘、回流的css属性

将重绘，回流的影响范围限制在单独的图层之内

• 方法1 3d或透视变换css属性
• 方法2 video节点
• 方法3 混合插件（Flash）
• 方法4 对自己用webkit变换做的动画元素
• 方法5 canvas
• 方法6 拥有GPU加速的css的元素（比如transform）
• 方法7 元素有一个包含复合层的后代节点

• 方法8 在符合页面上有z-index的层级

  
  Pasted Graphic.png

回流重绘过程

Pasted Graphic 1.png

实战优化点

• 用translate替代top（top会触发layout的过程）
• 用opactiy替代visibility（visibility会触发重绘）
• 不要一条条修改DOM样式，用class，避免一次次重绘，虽然有缓存会去处理，但是不是绝对的，我们尽量让我们的代码去这么做
• 把DOM离线修改，先设置为display：none然后操作
• 不要把DOM的某个元素里放到循环里当变量（offsetWidth），会疯狂回流（适当利用回流的缓冲机制，不要每次都去获取）
• 不要使用table布局，可能很小的改动，也会造成整个table的重布局
• 动画速度的选择（css影响js代码的运行速度）
• 动画新建图层
• 启用GPU加速，translateZ（0）或者translate3d（0，0，0）

总结下就是，优化都是有利有弊的，我们要做的就是一个balance