什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?

什么是回流(重排 reflow)?

回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效,并重新构造这部分,完成reflow后,浏览器会重新绘制受影响的部分到屏幕中

(继昨日每日一题:display:none和visibility:hidden 当display显示及隐藏元素时,显示时占据空间,隐藏时不占空间,隐藏前后DOM结构发生变化,所以需要重新渲染 当visibility显示及隐藏元素时,不论是显示还是隐藏,都占据空间,因此隐藏前后DOM结构未发生变化,所以不需要重新渲染。)

什么是重绘(repaint)?

重绘(repaint):当我们对DOM的修改导致的样式变化,但未影响几何属性时,浏览器不需要重新计算元素的几何属性,直接可以为该元素绘制新的样式,跳过了回流环节,这个过程就叫重绘。

 

结论:回流必定会发生重绘,重绘不一定发生回流

 

在页面交互中存在频繁的回流与重绘,这个过程,会很大程度的影响性能,因为回流所需成本比重绘高的多,so,能用重绘就不要用回流了。

 

如何减少回流、重绘?

减少回流、重绘就是减少对DOM的操作

1.直接改变className,如果动态改变样式,则使用cssText(减少设置多项内联样式)

2.让要操作的元素进行“离线处理”,处理完后一起更新

当使用DocumentFragment进行缓存操作,引发一次回流和重绘

使用display:none 技术,只引发两次回流和重绘

使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘

3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

4.让元素脱离动画流,减少render 树的规模

5.牺牲平滑度换取速度

6.避免使用table布局

7.IE中避免使用javascript表达式

posted @   麋鹿鲁哟  阅读(1214)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!

阅读目录(Content)

此页目录为空

网站统计
点击右上角即可分享
微信分享提示