DOM节点和CSS节点的改动都可能会造成渲染树的重新构建。渲染树的改动就会造成页面的重排或者重绘

重排一定触发重绘，但重绘不一定触发重排

一：重排（Reflow）

DOM树结构，尺寸，排版的变化（改变元素的大小、位置、布局方式等），渲染树里有改动的节点和它影响的节点都要重新计算。这个过程就叫做重排，也称为回流，需要重新渲染页面

1：添加或者删除可见的DOM元素

2：元素的字体大小发生变化

3：查询某些属性或者调用某些方法，比如offsetLeft/Top/Height/Width

4：元素的尺寸或者位置发生变化

5：元素的内容发生变化

6：激活CSS伪类

7：浏览器窗口大小发生变化

8：页面首次渲染

浏览器渲染页面是基于流式布局，会导致周围DOM元素重新排列

1：全局范围：对整个渲染树进行重新布局

2：局部范围：对渲染树的某一部分或者一个渲染重新布局，不会影响到外界元素

二：重绘（Repaints）

DOM 的修改导致了样式的变化，没有影响到几何属性，浏览器不需要重新计算几何属性，简单来说，重绘是对元素绘制属性的修改引发的

注意以下会导致重排

1：color、background 相关属性

2：outline 相关属性

3：border-radius、visibility、box-shadow

三：优化重排方案 ，尽量减少重排，最简单的方式是：1.减少重排次数；2.缩小重排范围

1：尽量减少DOM节点操作

2：不要使用table布局

3：使用css表达式，

4：不要频繁操作样式，避免设置多层内联样式，更改类名而不是修改样式

5：使用 absolute 或者 fixed，使元素脱离文档流

6：离线操作元素，将元素先设置display: none，操作结束后再把它显示出来

7：分离读写操作，DOM的多个读操作放一起，浏览器有渲染队列机制，可以让多次回流重绘变成一次

8：使用css3动画，可以调用 GPU 执行渲染