切换主题
回流和重绘
何为回流(重排)?
布局引擎会根据各种样式计算每个元素(盒模型)在页面上的大小与位置。
何为重绘?
当计算好盒模型的位置、大小及其它属性后,浏览器根据每个盒子特性(颜色,方向)进行绘制。
什么操作会触发回流?
当浏览器需要(重新)计算元素的几何属性时(位置,大小等),便会触发回流,具体地:
- 页面初始渲染;
- 元素的位置发生变化,如:
left
、right
、top
、bottom
等;- 元素的尺寸发生变化,如:
width
、hegiht
、padding
、border
、margin
等;- 元素的内容发生变化,如:字体大小、文字数量、图片大小等;
- 添加或删除可见的
DOM
元素;- 激活
CSS
伪类,如::hover
;- 查询某些属性,如:
client
系:clientWidth
、clientHeight
、clientTop
、clientLeft
;offset
系:offsetWidth
、offsetHeight
、offsetTop
、offsetLeft
;scroll
系:scrollWidth
、scrollHeight
、scrollTop
、scrollLeft
;- 调用某些方法,如:
getComputedStyle()
、getBoundingClientRect()
、scrollTo()
、scrollIntoView()
等。
什么操作会触发重绘?
当浏览器需要(重新)计算元素外观样式的变化时(颜色、文本方向、阴影等),便会触发重绘。
回流和重绘是什么样的关系?
null
由像素管道可知:回流一定会触发重绘,而重绘不一定会触发回流。
如何减少回流和重绘?
- 避免使用
table
布局;- 避免使用
CSS
表达式,如:calc()
;- 避免设置多项内联样式,尽可能使用
class
合并样式修改;- 对于复杂的动画,对元素设置
position: fixed/absolute
,尽可能地使其脱离文档流;- 使用能开启 CSS3 硬件加速的属性,如:
opacity
、transform
(可替换掉left
、right
等);- 通过
JavaScript
动态插入多个元素时,使用DocumentFragment
合并插入操作;- 需频繁操作元素时,应设置
display: none
使其先离线,完成操作后再恢复;- 此外像屏幕滚动、窗口缩放、按钮点击及输入查询等,应合理设置防抖与节流。