回流，重绘，重排，重构傻傻分不清楚

回流（重构/重排/reflow）

回流也叫重构，重排，具体含义如下
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

触发重排的条件：任何页面布局和几何属性的改变都会触发回流
● 页面渲染初始化(无法避免)
● 添加或删除可见的DOM元素
● 元素位置的改变，或者使用动画
● 元素尺寸的改变——大小，外边距，边框
● 浏览器窗口尺寸的变化
● 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

重绘（repaint或redraw）

重绘是指一个元素外观样式改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色，背景颜色等

下面这些操作会导致重绘：
color、background 相关属性：background-color、background-image 等
outline 相关属性：outline-color、text-decoration
border-radius、visibility、box-shadow

回流一定会引发重绘，但是重绘不一定引发回流

如何避免回流与重绘？

1 操作DOM时，尽量在低层级的DOM节点进行操作

2 不要使用table布局， 一个小的改动可能会使整个table进行重新布局

3 使用CSS的表达式

4 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。

5 使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素

6 避免频繁操作DOM，可以创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中

7 将元素先设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

8 将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。