最近在做一個項目的前端頁面,其中包含主題切換功能,有一個主題是毛玻璃風格。但我在實現過程中,發現加上毛玻璃效果之后,整個頁面出現了肉眼可見的卡頓,而且電腦(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.homelsc.com/read/226