浏览器重排重绘总结

重排
浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。
也就是一个元素的外观被改变，但是没有改变布局（比如宽高等）的情况下发生的，比如改变visibility、outline、背景颜色之类。
重绘
浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间
DOM的变化影响了元素的几何属性（比如宽高），浏览器会重新计算元素的几何属性，比如改变窗口大小、文字大小或内容的改变、浏览器窗口变化、style属性的改变等。
重绘、重排关系
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
回流（reflow）
浏览器某个部分发生了变化影响了布局，需要倒回去重新渲染。