笔记
动画里别把 scale 和 blur 放一起
约 249 字 · 阅读约 1 分钟
建站记录 · 本文有 AI 参与整理,文中的操作与环境对应写作当时的版本。
给每节的环境光加了漂移动画之后,无头浏览器里整站开始掉帧,连不相干的跑马灯都卡。
blur 是一次性的:栅格化完就是一张纹理。transform 平移它,是整帧搬纹理,很便宜。但动画里还写了 scale(1.16)——缩放会改变模糊的视觉半径,浏览器只好每一帧都重算那 64px 的高斯模糊。软件渲染下,每帧都是一次全尺寸卷积。
改法是缩放从动画里删掉,光斑要多大就把元素本身做多大,动画只留 translate。
抓到它的是现成的无头测试:解码动画要在 4 秒内播完,一直正常,某天开始超时。帧率掉没掉,测试先于肉眼知道。