怎么减少重排和重绘

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排:

1、添加或者删除可见的DOM元素;

2、元素位置改变——display、float、position、overflow等等;

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

5、页面渲染初始化;

6、浏览器窗口尺寸改变——resize事件发生时;

**

减少重排重绘

**
Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点,甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么,但是如果 Reflow 发生在手机上,那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

  1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器);

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

(a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
(b) 使用display:none技术,只引发两次回流和重绘;
© 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

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

  1. 让元素脱离文档流,减少回流的Render Tree的规模;
  2. 使用transfrom代替 上面的 1 2 3 4 5 6 减少性能消耗
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值