重绘（repaint）和回流(reflow)

浏览器渲染（页面加载）的过程

1. 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
2. CSS 文件下载完成，开始构建 CSSOM(CSS 树)
3. CSSOM 构建结束后，和 DOM 一起生成渲染树（render 树就是根据 可视化节点 和 css 样式表 结合诞生出来的树）
4. 布局(Layout)：计算出每个节点在屏幕中的位置
5. 显示(Painting)：通过显卡把页面画到屏幕上

DOM 树 和 渲染树 的区别：

DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

回流

当一些操作导致DOM树的结构发生改变，会对DOM树进行重新构建，渲染树对页面进行部分或全部渲染的过程称为回流。

触发reflow

添加或删除可见的DOM元素。
元素位置改变。
元素的尺寸改变（包括：内外边距、边框厚度、宽度、高度等属性的改变）。
内容改变。
页面渲染器初始化。
浏览器窗口尺寸改变。

回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

重绘和回流（重排）的区别和关系

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
回流必将引起重绘，而重绘不一定会引起回流

注：
由于display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。
尽量避免使用表格布局，当我们不为表格td添加固定宽度时，一列的td的宽度会以最宽td的宽作为渲染标准，假设前几行td在渲染时都渲染好了，结果下面某行的一个td特别宽，table为了统一宽，前几行的td会回流重新计算宽度，这是个很耗时的事情。

减少回流

1. DOM的增删行为

比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。如果要加多个子元素，最好使用documentfragment。

2. 几何属性的变化

比如元素宽高变了，border变了，字体大小变了，这种直接会引起页面布局变化的操作也会引起回流。如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流。

3. 元素位置的变化

修改一个元素的左右margin，padding之类的操作，所以在做元素位移的动画，不要更改margin之类的属性，使用定位脱离文档流后改变位置会更好。

4. 获取元素的偏移量属性

例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。

5. 页面初次渲染

这样的回流无法避免

6. 浏览器窗口尺寸改变

resize事件发生也会引起回流。

这里就不列举引起重绘的行为了，记住，回流一定伴随着重绘，所以上面的行为都会重绘，除此之外，例如修改背景颜色，字体颜色之类不影响布局的行为都只引发重绘。