重绘(redraw)和重排(reflow)

重绘:是一个元素的外观变化所引发的浏览器行为;例如改变visibility、outline、背景色等属性。

重排:是引起DOM树重新计算的行为;

引发重排:

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

升华版:

dom树的结构变化 (添加、删除dom)

获取某些属性 offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight


改进的方法:

1.将多次dom修改合并成一次操作

2.多次重排的元素,先脱离文档流,在修改

3.display属性为none,减少重排

4. 在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量


参考地址:kb.cnblogs.com/page/169

页面重绘和回流以及优化 - WEB前端开发 - 专注前端开发,关注用户体验

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值