最近在做一个项目的前端页面,其中包含主题切换功能,有一个主题是毛玻璃风格。但我在实现过程中,发现加上毛玻璃效果之后,整个页面出现了肉眼可见的卡顿,而且电脑(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://www.ichenhua.cn/read/226