页面的回流(reflow)和重绘(repaintd)

本文介绍了网页渲染过程中的关键概念——回流与重绘,并详细解释了哪些操作会触发这些过程。此外,还提供了几种减少回流与重绘次数的方法,以提高页面性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.首先需要了解的是页面渲染过程(如下图所示):

2.回流和重绘的概念:

回流:浏览器重新构建render tree的过程

重绘:浏览器根据render tree重新绘制界面的过程

3.引起回流的操作

当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候

4.引起重绘的操作
  • 当页面发生回流
  • 当改变元素不影响布局的属性的的时候;如:颜色,
5.优化

浏览器实际上在会帮助我们做一些这方面的优化.它会维护一个队列,把所有引起回流,重绘的操作放入到这个队列,当到达一定的条件,浏览器就会对这个队列的所有操作进行一个批处理,这样就会让多次的回流,重绘变成一次回流重绘.

但是我们自身的操作有时候也会引起浏览器刷新整个队列.当要获取元素大小信息的时候,浏览器会为了提供最准确的值而去刷新队列

所以,我们自己能做的优化为:

  • 针对一个node,如果有多个大小相关的样式需要改变,则尽量通过添加类名,csssText拼接;(尽量批量改变,而避免单个改变)
  • a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
    b) 使用display:none技术,只引发两次回流和重绘;
    c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
  • 尽量避免访问能够引起浏览器刷讯队列的属性,如果不能避免,则利用缓存
  • 让元素脱离动画流
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值