重绘和重流的区别

HTML页面的重绘（repaint）和重流（reflow）repaint）

浏览器的大概工作流程

以普通的HTML页面为例：

解析HTML文档，生成dom树
解析css产生css规则树
解析JavaScript，通过DOM-API来操作dom树和css规则树
通过dom树和css规则树来构造渲染树（rendering tree）
调用操作系统的GUI接口画页面、

重流

元素的大小尺寸、位置发生变化时，会重新计算渲染树，页面要进行重新排版工作，这个过程即是重流。

触发重流的因素
1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

6.获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会导致队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

重绘

在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等。

如何进行优化，减少重绘和重流

1.浏览器自己的优化：

浏览器会维护1个队列，把所有会引起重排，重绘的操作放入这个队列，等队列中的操作到一定数量或者到了一定时间间隔，浏览器就会flush队列，进行一批处理，这样多次重排，重绘变成一次重排重绘

2.减少重绘和重排：

1.不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。
2.不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
3.为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
4.千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。
5.不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）