首页 前端知识 backdrop-filter css的性能杀手

backdrop-filter css的性能杀手

2024-03-26 08:03:02 前端知识 前端哥 8 536 我要收藏

  前端时间开发页面的时候,要求页面看起来没那么简陋,所以div用了毛玻璃效果,但是问题就来了。

前提:一个限制高度的父div下包含多个子div,子div使用for循环动态生成,子div的样式采用了毛玻璃效果,所以每个子div都用了backdrop-filter属性。

问题:父div滚动条滚动时,页面会出现空白,过一会才渲染出子div。

原因:backdrop-filter非常损耗渲染性能,动态循环生成多个,更是要命。

解决方法:俗话说,解决一个问题的方法,就是去掉产生问题的本身,学艺不精,所以直接去掉了这个属性。

如果一定要用的话,可以参考一下这位大佬写的文章(使用该属性的时候需要同时启用GPU加速)毛玻璃效果backdrop-filter:blur卡顿性能优化方案 - 陈华编程

CSS会启用GPU加速的属性有这几个:translate3d、translateZ、rotate、scale,在用到 backdrop-filter:blur 的div上,加上其中一个属性即可。

transform: translateZ(0);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4124.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!