Javascript 避免浏览器重绘和重排
重排与重绘的区别
- 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺⼨需要重新计算,表现为重新⽣成布局,重新排列 元素
- 重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变,例如改变元素背景⾊时,屏幕上的部分内容需要更 新,表现为某些元素的外观被改变
单单改变元素的外观,肯定不会引起⽹⻚重新⽣成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分
重排和重绘代价是⾼昂的,它们会破坏⽤户体验,并且让UI展示⾮常迟缓,⽽相⽐之下重排的性能影响更⼤,在两者⽆ 法避免的情况下,⼀般我们宁可选择代价更⼩的重绘。
『重绘』不⼀定会出现『重排』,『重排』必然会出现『重绘』。
如何触发重排和重绘
任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘:
- 添加、删除、更新DOM节点
- 通过display: none隐藏⼀个DOM节点-触发重排和重绘
- 通过visibility: hidden隐藏⼀个DOM节点-只触发重绘,因为没有⼏何变化
- 移动或者给⻚⾯中的DOM节点添加动画
- 添加⼀个样式表,调整样式属性
- ⽤户⾏为,例如调整窗⼝⼤⼩,改变字号,或者滚动。
如何避免重排或者重绘
集中改变样式
我们往往通过改变class的⽅式来集中改变样式
// 判断是否是⿊⾊系样式
const theme = isDark ? 'dark' : 'light'
// 根据判断来设置不同的class
ele.setAttribute('className', theme)
使⽤DocumentFragment
我们可以通过createDocumentFragment创建⼀个游离于DOM树之外的节点,然后在此节点上批量操作,最后插⼊
DOM树中,因此只触发⼀次重排
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i ){
let node = document.createElement("p");
node.innerHTML = i;
fragment.appendChild(node);
}
document.body.appendChild(fragment);
提升为合成层
将元素提升为合成层有以下优点:
- 合成层的位图,会交由 GPU 合成,⽐ CPU 处理要快
- 当需要 repaint 时,只需要 repaint 本身,不会影响到其他的层
- 对于 transform 和 opacity 效果,不会触发 layout 和 paint
提升合成层的最好⽅式是使⽤ CSS 的 will-change 属性:
#target {
will-change: transform;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbece
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01