重绘和回流的异同,如何避免优化?

一、什么是重绘?

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。

二、什么是回流?

当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。

三、区别:

回流必将引起重绘,而重绘不一定会引起回流。

比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变

四、过程:

不是修改完立马执行这个过程

浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

五、如何减少重绘和回流

1.CSS

  • 使用transform替代top
  • 使用visibility替换display:none,因为前者只会引起重绘,后者会引发回流(改变了布局)
  • 避免使用table布局,可能很小的一个改动会造成整个table的重新布局
  • 尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围。
  • 避免设置多层内联样式,css选择符从右往左匹配查找,避免节点层级过多。
  • 将动画效果应用到position属性为absolute或者fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流。同时,控制动画速度可以选择requestAnimationFrame。
  • 避免使用css表达式,可能会引发回流。
  • 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change,video,iframe等标签,浏览器会自动将该节点变为图层。
  • CSS3硬件加速(GPU加速),使用CSS3硬件加速,可以让transform,opacity,filters这些动画不会引起回流重绘。

2.JavaScript

  • 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性
  • 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。
  • 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值