浏览器的重排和重绘-前端进阶
关于浏览器重排和重绘的概念,最近看到不少这方面的文章,觉得挺有用,在制作中考虑浏览器的性能,减少重排能够节省浏览器对其子元素及父类元素的重新渲染,避免过分的重绘也能节省浏览器性能,自己也有了一定的理解,所以分享给大家。
网页生成过程
HTML 被 HTML 解析器解析成 DOM 树
CSS 则被 CSS 解析器解析成 CSSOM 树(CSS Object Model)
结合DOM树和CSSOM树,生成一棵渲染树(Render Tree) , 而这一过程为Attachment
生成布局(flow),浏览器在屏幕上“画”出渲染树中的所有节点、即渲染树的所有节点进行平面合成
将布局绘制(paint)在屏幕上
渲染(render)
"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。
网上找的一张图看起来更直观
什么时候进行渲染
网页生成的时候,至少会渲染一次。
用户访问的过程中,还会不断重新渲染。
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发重新渲染。
重新渲染可以拆分为两步
重绘:重新绘制布局到屏幕上
重排:重新生成布局,重新排列元素。
就如上面的概念一样,单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分。比如改变元素高度,这个元素乃至周边dom都需要重新绘制。
也就是说:重绘不一定导致重排,但重排一定会导致重绘。
浏览器的渲染队列
当我们修改了元素的几何属性,导致浏览器触发重排或重绘时。它会把该操作放进渲染队列,等到队列中的操作到了一定的数量或者到了一定的时间间隔时,浏览器就会进行触发渲染。
div.style.left = '10px'; div.style.top = '10px'; div.style.width = '20px'; div.style.height = '20px'; 复制代码
根据我们上文的定义,这段代码理论上会触发4次重排+重绘,因为每一次都改变了元素的几何属性,实际上最后只触发了一次渲染,这都得益于浏览器的渲染队列机制
div.style.left = '10px'; console.log(div.offsetLeft); div.style.top = '10px'; console.log(div.offsetTop); div.style.width = '20px'; console.log(div.offsetWidth); div.style.height = '20px'; console.log(div.offsetHeight); 复制代码
这段代码理论上会触发几次重新渲染(reflow+repaint)呢? 实际上是4次。 因为读取offset这些属性的时候,会进行强制刷新渲染队列触发重新渲染(如果渲染队列有重排或重绘任务的话),因为需要保证结果的 即时性 和 准确性。
以下的属性和方法会强制刷新渲染队列:
clientWidth
、clientHeight
、clientTop
、clientLeft
offsetWidth
、offsetHeight
、offsetTop
、offsetLeft
scrollWidth
、scrollHeight
、scrollTop
、scrollLeft
scrollIntoView()
、scrollIntoViewIfNeeded()
getComputedStyle()
、getComputedStyle()
scrollTo()
重排(reflow)
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
重排也叫回流,简单的说就是重新生成布局,重新排列元素。
什么情况会发生重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸,比如边距、填充、边框、宽度和高度等
改变元素内容,比如文字数量,图片大小等
改变元素字体大小
改变浏览器窗口尺寸,比如resize事件发生时
激活CSS伪类(例如:
:hover
)设置 style 属性的值,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法:offsetWidth、offsetHeight等,除此之外,当我们调用
getComputedStyle
方法,或者IE里的currentStyle
时,也会触发重排,原理是一样的,都为求一个“即时性”和“准确性”。
以下是常见的导致重排的style:
width
、height
、display
、padding
、margin
position
、left
、top
、right
、buttom
、border
vertical-align
、text-align
、clientTop
、clientLeft
font-size
、font-family
、font-weight
、line-height
float
、overflow
、overflow-y
、min-height
、white-space
、
重排影响的范围
由于浏览器渲染界面是基于流式布局模型的,所以触发重排时会对周围DOM重新排列,影响的范围有两种:
全局范围:从根节点html开始对整个渲染树进行重新布局。
局部范围:对渲染树的某部分或某一个渲染对象进行重新布局
全局重排:
从根节点html开始对整个渲染树进行重新布局,相当于重新渲染整个页面了。
局部重排:
把一个dom的宽高之类的几何信息定死,然后在dom内部触发重排,就只会重新渲染该dom内部的元素,而不会影响到外界。
也就是说重排和重绘的DOM元素层级越高,成本就越高。
那么尽可能在低层级的DOM节点上,上述例子中,如果你要改变p的样式,class就不要加在div上,通过父元素去影响子元素不好。
重绘(Repaints)
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。
触发重绘的属性有很多,比如说color,background、visibility、outline 等等
优化浏览器性能
优化浏览器的性能,就意味着要限制重排和重绘的次数,避免频繁的进行重新渲染
1. 分离读写操作
div.style.left = '10px'; div.style.top = '10px'; div.style.width = '20px'; div.style.height = '20px'; console.log(div.offsetLeft); console.log(div.offsetTop); console.log(div.offsetWidth); console.log(div.offsetHeight); 复制代码
上面的代码段,只是触发了一次重排而已
在第一个console
的时候,浏览器把之前上面四个写操作的渲染队列都给清空了。剩下的console,因为渲染队列本来就是空的,所以并没有触发重排,仅仅拿值而已。
2. 样式集中改变
虽然现在大部分浏览器有渲染队列优化,不排除有些浏览器以及老版本的浏览器效率仍然低下
建议通过改变 className
的方式改变样式,不要一条一条地修改 DOM 的 style 样式,预先定义好 class,然后修改 DOM 的 className
3. 缓存布局信息
// good 缓存布局信息 相当于读写分离 var curLeft = div.offsetLeft; var curTop = div.offsetTop; div.style.left = curLeft + 1 + 'px'; div.style.top = curTop + 1 + 'px'; 复制代码
4. 离线改变dom
隐藏要操作的dom
dom.display = 'none' // 修改dom样式 dom.display = 'block' 复制代码
把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来
通过使用
DocumentFragment
创建一个dom
碎片,在它上面批量操作dom,操作完成之后,再添加到文档中,这样只会触发一次重排。复制节点,在副本上工作,然后替换它!
5.使用 absolute 或 fixed 脱离文档流
position属性为absolute
或fixed
的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响,只需要考虑其自身的重排和重绘。
6.不要使用 table 布局
随便一个cell的高度宽度的修改都会影响到整个表格重排,因此性能非常差。那么在不得已使用table的场合,可以设置table-layout:auto;
或者是table-layout:fixed
这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
7.优化动画
可以把动画效果应用到
position
属性为absolute
或fixed
的元素上,这样对其他元素影响较小。动画效果还应牺牲一些平滑,来换取速度,这中间的度自己衡量:
比如实现一个动画,以1个像素为单位移动这样最平滑,但是Layout就会过于频繁,大量消耗CPU资源,如果以3个像素为单位移动则会好很多启用GPU加速
GPU
硬件加速是指应用GPU
的图形性能对浏览器中的一些图形操作交给GPU
来完成,因为GPU
是专门为处理图形而设计,所以它在速度和能耗上更有效率。GPU
加速通常包括以下几个部分:Canvas2D,布局合成, CSS3转换(transitions),CSS3 3D变换(transforms),WebGL和视频(video)。
总结
浏览器性能优化是进阶路上必不可少的,像我们在开发中,触发重排这是不可避免的,应尽量按照文中的建议来组织代码,避免不必要的重新渲染,这种优化,需要平时有意识的去做,一点一滴的去做,希望大家重视一下。
作者:_luo
链接:https://juejin.cn/post/7019644228359684110