重绘与重排(回流)

一、重绘不一定需要重排，重排必然会导致重绘。

回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生

重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

1. 页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
2. 浏览器窗口尺寸改变
3. 元素位置和尺寸发生改变的时候
4. 新增和删除可见元素
5. 内容发生改变（文字数量或图片大小等等）
6. 元素字体大小变化。
7. 激活CSS伪类（例如：:hover）。
8. 设置style属性
9. 查询某些属性或调用某些方法。比如说：
10. offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
11. 除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理是一样的，都为求一个“即时性”和“准确性”。

重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

1. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如
2. visibility、outline、背景色，改变字体颜色等属性的改变。

 下面的代码是影响回流和重绘的:

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 重绘
s.backgroundColor = "#ccc"; // 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

二、减少reflow、repaint

1. 不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。
2. 不要把DOM结点的属性值放在一个循环里当成循环里的变量。
3. 为动画的HTML元件适用fixed或absolute的position，那么修改他们的css是不会reflow