重绘（Repaint）
当页面中元素样式的改变并不影响它在文档流中的位置时（例如改变颜色、阴影等），浏览器会进行重绘，即重新绘制元素的外观。
回流（Reflow）
当元素的大小、位置、隐藏等改变时，浏览器需要重新计算元素的几何信息，并重新渲染页面，这个过程称为回流。会影响当前元素、祖先元素和后代元素。
性能影响
- 回流比重绘的代价要高。回流的过程比重绘复杂，因为它涉及到更多的计算。
- 回流必将引发重绘，而重绘不一定会引发回流。
触发条件
- 添加或删除可见的DOM元素
- 元素尺寸改变
- 内容变化，例如用户在input框中输入文字
- 页面渲染初始化
- 浏览器窗口尺寸改变 —— 触发重排(回流)。
如何减少重绘和回流
- 使用transform替代top。
- 使用visibility替换display: none —— 因为前者只会触发重绘，后者会触发回流（重排）。
- 不要使用table布局，因为可能很小的一个小改动会导致整个table的重新布局。
- 避免在循环中对DOM进行频繁操作，可以使用documentFragment进行批量操作。
- 避免频繁地读取会引发回流/重绘的属性，如果需要多次使用，可以用变量缓存起来。
代码示例
回流
HTML：
<div id="container">
<p>Some text here...</p>