重排和重绘

重排（Reflow）

当 render tree 中的 node 的几何属性发生变化的时候，浏览器会使 render tree 中受影响的部分失效，并重新构造 render tree

重绘（Repaint）

当 render tree 中的 node 的样式发生改变的时候，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观

所以，重绘不一定需要重排，重排必定导致重绘

引发重排

• 添加删除可见的 dom
• 元素位置改变
• 元素的尺寸改变（外边距，内边距，边框厚度，宽高等几和属性）
• 页面渲染初始化
• 获取某些属性的时候，浏览器为了获取正确的值也会触发重排，因为该操作会导致队列刷新
  • offsetTop,offsetLeft,offsetWidth,offsetHeight
  • scrollTop,scrollLeft,scrollWidth,scrollHeight
  • clientTop,clientLeft,clientWidth,clientHeight
  • ……

引发重绘

改变某个元素的背景色，文字颜色，边框颜色

优化

浏览器自己的优化

• 浏览器会维护一个队列，把所有引起重排，重绘的操作放到这个队列里面，等队列中的操作到一定的数量或者到了一定的时间间隔，浏览器会 flush 队列，进行一批处理，这样多次重排，重绘变成一个重排重绘

减少重排重绘

• 不要一条一条的修改 DOM 样式，可以先定义好 class，然后修改 DOM 的 className
• 减少对 DOM 的操作