关于前端 backdrop-filter:blur 使用后变卡的优化问题

[Archeb]

首先直接上 Demo，这是我目前在做的一个主题

https://qwq.moe/playground/Candy2/

这个主题大量使用了 backdrop-filter:blur 特性，导致页面在首次加载并应用效果的时候会变得很卡

主要表现就是同一个浏览器会话（不重启浏览器），第一次打开这个页面，包括滚动和点击文章的动画效果都会非常卡

在第一次运行这些动画效果之后，再次进行点击文章和滚动等操作则十分流畅

（但是如果没有独显，性能较差的核显就算再次点击依然是比较卡的）

去掉 backdrop-filter:blur 之后则没有这个问题

根据现象推断浏览器应该是在第一次运行动效之后做了某些类似于 cache 的机制，而重启浏览器就会清除

我希望有办法能够让他在加载这个页面的时候就做了这些 cache，可以让用户多加载一会而不是运行的时候才卡，这样比较影响体验。

目前在 js 里面加上了检测低性能显卡禁用毛玻璃的代码（ WebGL API ），还没实装，不过就算是高性能独显第一次也是会卡卡的。