回流与重绘问题

首先，我们要知道什么叫回流，什么叫重绘：

当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。
当render tree中的一些元素需要更新属性，而这些元素只影响元素的外观，风格，而不会影响布局的叫做重绘。

那么，哪些情况会导致回流呢？

1. DOM的增删行为
2. 几何属性的变化
3. 元素位置的变化
4. 获取元素的偏移量属性
5. 页面初次渲染（每个页面至少需要一次回流的原因）
6. 浏览器窗口尺寸改变

要知道，回流必定触发重绘，而重绘不一定触发回流。因此避免回流是页面优化的关键，减少回流，重绘，其实就是需要减少对render tree的操作，并减少对一些style信息的请求，以下是避免回流的几种方法：

1. 尽可能在DOM树的末端改变class，可以限制回流的范围，使其影响尽可能少的节点
2. 避免操作DOM，创建一个div，在它上面进行所有的DOM操作，最后将他添加到document；或者在一个display：none的元素上进行操作，最后显示，因为display：none的DOM操作不会引发回流重绘
3. 尽量不要设置多层内联样式，尽量将样式合并在一个外部类
4. 将需要多次回流的元素position属性设置为absolute或者fixed，使元素脱离文档流，这样它就不会影响到其他的元素
5. 离线操作DOM，当对 dom 节点有较大改动的时候，我们先将元素脱离文档流，然后对元素进行操作，最后再把操作后的元素放回文档流。
   例： 改变 display 属性，临时将某个元素从文档流中脱离，然后再恢复它；
   通过在需要操作的节点上创建副本，然后在副本上进行操作，最后进行替换；
   通过 createDocumentFragment，创建文档片段，操作后一次性把文档片段添加到文档流中。
6. 避免使用table布局