重排和重绘理解

最近考虑到页面性能优化的问题，想简单总结一下重排和重绘，以帮助我们更好的理解浏览器是如何做到页面及时更新变化的。

当DOM的变化影响了元素的几何属性，浏览器需要重新计算元素的集合属性，同样其他元素的集合属性和位置会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程成为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程成为重绘。

重排,目前有以下几个原因会导致页面重排：

• 1.添加或者删除可见的DOM元素；
• 2.元素位置改变；
• 3.元素尺寸改变；
• 4.元素内容改变；
• 5.页面渲染初始化；
• 6.浏览器窗口尺寸改变；
• 字体大小；

如何避免大量的重排工作：

• 1.分离读写操作；
• 2.样式集中改变；
• 3.缓存布局信息；
• 4.将position属性设置为absolute或者fixed;
• 5.优化动画；

重绘，vidibility、outline、背景色等属性的改变会触发重绘。