什么是重排.重绘,如何减少重排

重绘
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,所以重绘跳过了创建布局树和分层的阶段。

重排(回流)
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。

关系
重排需要重新计算布局树,重绘不需要,重排必定发生重绘,但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。

触发重排的方法
-页面初始渲染,这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸,比如边距、填充、边框、宽度和高度等 -改变元素内容,比如文字数量,图片大小等 -改变元素字体大小 -改变浏览器窗口尺寸,比如resize事件发生时 -激活CSS伪类(例如::hover) -设置 style 属性的值,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow -查询某些属性或调用某些计算方法:offsetWidth、offsetHeight等

避免重排的方式
使用createElementFragment操作dom,最后一起推入文档
样式集中改变 使用class去修改样式
使用 absolute 或 fixed 脱离文档流
使用GPU加速提升网站的动画渲染性能:transform

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值