前端性能优化方法之重排Reflow/Repaint

Reflow(重排)

定义

Dom结构中的各个元素都有自己的盒子，这些都需要浏览器根据样式来计算并根据计算结果将元素放到他该出现的位置，这个过程称之为Reflow。

触发Reflow

当你增，删，改DOM节点时，会发生Reflow。
当你移动DOM位置，类似于做个动画的时候。
修改CSS样式
当你Resize窗口的时候(或者滚动)
修改网页默认字体的时候

如何尽量减少触发Reflow(Repaint效率高于Reflow)

1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

2：尽量通过class来设计元素样式，切忌用style
3：实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute

4：权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

5：不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，

这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

6：css里不要有表达式expression

7：减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。

8：避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

9: 尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。

Repaint(回流)

定义

当盒子的位置大小以及其他属性，比如说颜色，字体大小确定下来之后，浏览器会把这些元素都按照各自的特性绘制了一遍，于是页面内容出现了，这个过程称之为Repaint

触发条件

DOM改动
CSS改动
说白了。只要页面发生改变就会触发repaint。

Repaint无法避免

repaint是无法避免的，我们只能尽量减少repaint，更多的是去减少Reflow以达到最佳性能