V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Archeb
V2EX  ›  问与答

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

  •  1
     
  •   Archeb · 2020-11-24 22:23:17 +08:00 · 739 次点击
    这是一个创建于 369 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

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

    目前尚无回复
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1256 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:59 · PVG 07:59 · LAX 15:59 · JFK 18:59
    ♥ Do have faith in what you're doing.