前端时间开发页面的时候,要求页面看起来没那么简陋,所以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);