重绘、重排区别以及如何避免

clientTop、scrollTop、offsetTop详解

一、 重排、重绘

1-1 重排

1、 概念： 当渲染树的一部分必须更新并且节点的尺寸发生变化，浏览器会使渲染树中受到影响的部分失效，并重新构建渲染树
2、 引发重排：

• 添加、删除可见的dom
• 元素的位置改变
• 元素的尺寸改变（外边距。内边距、边框厚度、宽高等几何属性）
• 页面渲染初始化
• 浏览器窗口尺寸改变
• 获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排，会导致队列刷新
  • 属性包括：offsetTop,offsetLeft,offsetWidth,offsetHeight
    scrollTop,scrollLeft,scroolWidth,scrollHeight
    clientTop,clientLeft,clientWidth,clentHeight
    getComputedStyle()
  • 使用这些值时应进行缓存.

1-2 重绘

1、 在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
2、 例如： 改变某个元素的背景色、文字颜色、边框颜色等

1-3 区别：

重绘不一定需要重排，重排必然导致重绘（比如改变网页位置）

二、 减少及优化reflow/repaint

2-1 浏览器自己的优化

1. 浏览器会维护1个队列，把所有引起重排、重绘的操作放在这个队列中，等队列中的操作到一定数量或者到一定时间间隔，浏览器就会flush队列，进行一批处理

   • 多次重排重绘就会变成一次重排重绘

2. 减少reflow/repaint:

   • 不要一条一条修改DOM的样式，可以先定义好css的class，然后修改DOM的className

   • 不要把DOM结点的属性值放在一个循环里当成循环里的变量

   • 为动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会reflow的。

   • 千万不要使用table布局.很小的一个改动就会造成整个table的重新布局

     • table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

   • 不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）