重绘:当元素的一部分属性发生改变，

如背景、颜色等不会引起布局变化，

只需要浏览器根据元素的新属性重新绘制，

使元素呈现新的外观叫做重绘。 

 

重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程

 

 

所以简单的来说就是。不会引起布局的变化，叫做重绘。

会引起布局的变化，叫做重排(回流)

所以在我们平时写css的时候，还是要按照html中类的顺序来写。

否者可能会造成重排，重拍是需要消耗浏览器性能的哈。

 

引起重排的地方

 

1.添加、删除可见的dom

2.元素的位置改变

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

4.页面渲染初始化

5.浏览器窗口大小改变

6.设置style属性

7.改变文字大小

8.添加/删除样式表

9.激活伪类，如:hover

10.操作class属性

11.内容的改变，(用户在输入框中写入内容也会)

 

 

#### 如何减少重绘（Repaint）和重排（reflow）

 

（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

（5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）

（6）用translate替代top改变

（7）用opacity替代visibility（在独立图层下优化重绘）