使用CSS属性will-change去优化页面渲染

最新推荐文章于 2024-06-05 14:35:31 发布

喵大嗷

最新推荐文章于 2024-06-05 14:35:31 发布

阅读量567

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/connie_0217/article/details/80802678

版权

css3 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了浏览器页面重绘的触发原因及优化方法。详细介绍了如何利用 CSS 的 will-change 属性来预先通知浏览器可能发生的样式变化，从而减少重绘带来的性能损耗。同时讨论了该属性的内存占用问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说一个老生常谈的话题：什么会造成浏览器的页面重绘？

当元素的属性发生改变，也可以简单的理解为元素的外形发生改变的时候，例如改变盒子的宽高颜色等等，浏览器会根据元素的新的属性进行重绘。并不一定会带来重排。

重绘就会去使用CPU进行重新去计算，操作频繁会导致渲染的卡顿。比如页面滚动事件、某些动画渲染等等
如果说提前告知浏览器，元素会有哪些属性发生改变，让浏览器提前做好准备。那么就可以解决这个问题了。使用css的will-change属性就能做到提前告知。
但是提前作准备的话，会占用浏览器的内存。
这种做法有点像是挖了东墙补西墙的感觉。
如果能按需加上、或者用完就执行掉就不会有这么多的后顾之忧了

will-change

先说下用法：

.will-change{
     will-change: transform;
     transition: transform 0.5s;  
}
.will-change:hover{
            transform: scale(2)
 }

像这种用法就是会有上面说的浪费内存的后顾之忧的问题
怎么解决呢？
可以在这个元素的父级hover的时候给元素加上这个属性

.will-change-parent:hover .will-change { 
        will-change: transform;
 }
 .will-change{
     will-change: transform;
     transition: transform 0.5s;  
}
.will-change:hover{
            transform: scale(2)
 }