浏览器的重排和重绘

重排（回流）：

浏览器下载完页面的所有资源之后会解析生成两个内部数据结构：DOM树和渲染树。DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM元素的几何变化、DOM树的结构变化，都需要渲染树重新计算，会引发浏览器的重排和重绘。

会触发重排的操作：

1. 页面初始渲染时；
2. 浏览器窗口尺寸改变时；
3. 元素尺寸改变时；
4. 元素位置改变时；
5. 元素内容改变时；
6. 添加或删除可见的DOM元素时；
7. 当获取一些属性时：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

重排优化的方法：

1. 脱离文档流的元素的变化不会影响到其他元素，可以将需要多次重排的元素设置position属性。例如有动画效果的元素就最好设置为绝对定位。
2. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。所以，如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示，这样只在隐藏和显示时触发两次重排。

重绘：

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

对渲染树的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，它可能需要多次计算才能去确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是应该尽量避免使用table布局页面的原因之一。

重排和重绘的关系：

重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
重绘不一定会引起重排。