页面重排何时发生?
- 添加或删除可见的DOM元素。
- 元素位置改变。
- 元素尺寸改变(包括:外边矩、内边矩、边框厚度、宽度、高度等属性改变)。
- 内容改变,例如:文本改变或图片被另一个不同尺寸的图片替代。
- 页面渲染器初始化。
- 浏览器窗口尺寸改变。
?根据改变的范围和程度,渲染中或大或小的对应的部分也需要重新计算。有些改变会触发整个页面的重排:例如,当滚动条出现时。
?
使用以下步骤可以避免页面中的大部分重排:(尽量少使用:hover这个CSS伪选择器)
- 使用绝对位置定位页面上的动画元素,将其脱离文档流。
- 让元素动起来。当它扩大时,会临时覆盖部分页面。但这只是页面一个小区域的重绘过程,不会产生重排并重绘页面的大部分内容。
- 当动画结束时恢复定位,从而只会下移一次文档的其他元素。