JS中的重绘与回流

1.关于重绘和回流的定义

重绘：即对页面进行重新绘画。页面中元素发生可见性的变化（如修改颜色、更换背景），这种导致页面重新渲染的现象称为重绘。

回流 ：回流也能叫做重排。页面中元素发生位置或尺寸的变化，比如增加或删除dom节点、修改元素宽高等，会重新构造dom树再次渲染，这就是回流。

2.具体描述

（1）重绘不会引起dom结构和页面布局的变化，只是页面样式的变化；有重绘不一定有回流；

       而回流会引起dom结构和页面布局的变化，有回流就一定有重绘。

（2）多次使用会导致浏览器加载页面速度变慢，影响性能。

3.减少重绘和回流的途径

因为页面中各种操作基本都会引发回流和重绘，因此完全避免是不可能的。所以为了提高浏览器的性能，我们要尽可能的减少引发回流和重绘的状况。

（1）避免使用table布局，避免使用css表达式，避免设置多层内联样式，避免节点层级过多；

（2）读写dom尽量放在一起,当大量读写操作无法避免的时候，可以使用文档片段节点 DocumentFragment来解决；

  (3)   使用css3硬件加速，可以让transform、opacity、filters等动画不会引起重绘;

  (4)   使用fixed和absoluted能够减少回流和重绘。