1、重绘(Repaint)
重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制， 使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。
2、重排(Reflow)
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排
"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。 但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
3、常见的触发重排的操作
Reflow(重排) 的成本比 Repaint(重绘) 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法， 一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么， 但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
所以，下面这些动作有很大可能会是成本比较高的。 当你增加、删除、修改 DOM 结点时，会导致 Reflow , Repaint。 当你移动 DOM 的位置 当你修改 CSS 样式的时候。 当你 Resize 窗口的时候（移动端没有这个问题） 当你修改网页的默认字体时。 获取某些属性时 注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint， 因为没有发现位置变化。
