浅谈浏览器重绘（repaint）和回流（reflow）

回流与重绘

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。

什么操作会引起回流

1. DOM操作（对元素的增删改、顺序变化等）
2. 内容变化，包括表单区域内的文本变化
3. css属性的更改或者重新计算
4. 增删样式表内容
5. 修改class属性
6. 浏览器窗口变化（滚动或缩放）
7. 伪类样式激活（：hover等）

减少重绘和回流的方法

        1.  一起变化

　　如果要改变一个元素的样式，可以将所有样式集中在一个class上面一次变化，而不是变化几次，例如：

    <style type="text/css">
     .changeStyle { width: 100px; height: 100px; }
     </style>
     <script type="text/javascript">
     $(document).ready(function () {
         var el = $('id');
         //1
         el.css('width', '100px');
         el.css('height', '100px');
         //2
         el.css({ 'width': '100px;', 'height': '100px;' });
         //3 
         el.addClass('changeStyle');
     });
     </script>

     2.  具有动画效果请使用absolute

　　3.  避免使用表格布局

　　4.  不要使用CSS表达式

　　5.  在最末改变元素

　　因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。

　　6.  动画移动时候，要控制

　　比如我们拖动元素时候，我是在他x或者y坐标改变5px才操作，这样虽说降低了平滑度，但是对性能有提高

　　7.  如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。

　　8.  既然计算offsetWidth也会引起回流,那么就拿一个变量保存它

　　9.  当我们需要向文档中添加节点时，可以用文档碎片的方式去解决这个问题的，当我们需要给DOM中添加新的元素的时候，先将其放在一个容器中，然后统一添加，这样就只产生了一次回流。