一、什么是重排
二、什么是重绘
三、重排何时发生
当页面布局和几何属性改变时就会发生”重排“。下述情况中会发送重排:
- 添加或删除可见的DOM元素。
- 元素位置改变。
- 元素尺寸改变(包括:外边距、内边距、边框厚度、宽度、高度等属性改变)。
- 内容改变,例如:文本改变或图片呗另外一个不同尺寸的图片代替。
- 页面渲染初始化。
- 浏览器窗口尺寸
由于每次重排都会产生计算消耗,大多数浏览器通过队列化修改并批量执行来优化重排过程。获取布局信息的操作会导致队列刷新:
offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedStytle (currentStylke in IE)
以上属性和方法需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的”待处理变化“并触发重排以返回正确值。
在修改样式的过程中,最好避免使用以上列出的属性。因为它们都会刷新渲染队列,即使你是在获取最近未发生改变的或者与最新改变无关的布局信息。