一、 重排、重绘
1-1 重排
1、 概念: 当渲染树的一部分必须更新并且节点的尺寸发生变化,浏览器会使渲染树中受到影响的部分失效,并重新构建渲染树
2、 引发重排:
- 添加、删除可见的dom
- 元素的位置改变
- 元素的尺寸改变(外边距。内边距、边框厚度、宽高等几何属性)
- 页面渲染初始化
- 浏览器窗口尺寸改变
- 获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,会导致队列刷新
- 属性包括:offsetTop,offsetLeft,offsetWidth,offsetHeight
scrollTop,scrollLeft,scroolWidth,scrollHeight
clientTop,clientLeft,clientWidth,clentHeight
getComputedStyle() - 使用这些值时应进行缓存.
- 属性包括:offsetTop,offsetLeft,offsetWidth,offsetHeight
1-2 重绘
1、 在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
2、 例如: 改变某个元素的背景色、文字颜色、边框颜色等
1-3 区别:
重绘不一定需要重排,重排必然导致重绘(比如改变网页位置)
二、 减少及优化reflow/repaint
2-1 浏览器自己的优化
-
浏览器会维护1个队列,把所有引起重排、重绘的操作放在这个队列中,等队列中的操作到一定数量或者到一定时间间隔,浏览器就会flush队列,进行一批处理
- 多次重排重绘就会变成一次重排重绘
-
减少reflow/repaint:
-
不要一条一条修改DOM的样式,可以先定义好css的class,然后修改DOM的className
-
不要把DOM结点的属性值放在一个循环里当成循环里的变量
-
为动画的HTML元件使用fixed或absolute的position,那么修改他们的css是不会reflow的。
-
千万不要使用table布局.很小的一个改动就会造成整个table的重新布局
- table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
-
不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)
-