重排 Reflow：改变元素的几何信息（位置和大小）
重绘 Repaint：改变元素的外观信息（颜色）

了解重排重绘前，首先要了解浏览器绘制流程：

  1. HTML被HTML解析器解析成DOM 树
  2. css则被css解析器解析成CSSOM 树
  3. 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
  4. 生成布局（flow），即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制（paint）在屏幕上

    重排重绘的概念

    什么是重排 Reflow ？

    改变元素的几何信息是重排（位置和大小）。

    什么是重绘 Repaint？

    改变元素的外观信息是重绘（颜色等）

浏览器重绘(repaint)重排(reflow)与优化[浏览器机制] - 掘金