backdrop-filter css的性能杀手

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