最近在做一个项目的前端页面，其中包含主题切换功能，有一个主题是毛玻璃风格。但我在实现过程中，发现加上毛玻璃效果之后，整个页面出现了肉眼可见的卡顿，而且电脑（Mac Pro）风扇呼呼响。一查CPU，好家伙，Chrome占了70%，一个网页这么耗资源，还是第一次见。

前端CSS要实现毛玻璃效果，自然离不开filter和backdrop-filter属性，而且backdrop-filter似乎更好用，问题也就处在这个属性上，我整个页面只有最外层容器用到了这个效果，然后在html和body上，加了一些无关紧要的伪类。

如果大家对这个不是很了解的话，可以看看阮一峰的这篇文章，就介绍了毛玻璃效果的高斯模糊算法。

https://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html

我也查了一圈这个问题的解决方案，大部分是吐槽的，最实在的解决方案，就是不要用这个属性，没查到靠谱的方案。在查的过程中，我突然想到一个点，既然这个效果要用到算法，GPU的计算能力比CPU要强，有没有什么办法调GPU来渲染页面呢？

然后我顺着这个思路，查到CSS会启用GPU加速的属性有这几个：translate3d、translateZ、rotate、scale，然后我就在用到 backdrop-filter:blur 的div上，加上了一个不疼不痒的属性： 

transform: translateZ(0);

奇迹出现了，页面加载流畅了不少，而且animation的动画，也流畅了不少。虽然卡顿的问题有所缓解，但肯定还是没有自然的丝滑，大家酌情使用吧。

本文为 陈华 原创，欢迎转载，但请注明出处：http://ichenhua.cn/read/226