跳转到主要内容
Cosmos Archive
目录

工程随笔

滚动叙事的性能预算:Lenis 之外还要管什么

沉浸首页不是把动画堆满,而是给滚动、WebGL 与主线程各自留下预算。

  • 2026/11/10
  • 约 1 分钟
  • 前端
  • 性能
  • 滚动
站点原创作者 / 机构:Cosmos Archive许可:site-original核验:2026/11/11

滚动是主线程税

平滑滚动库会持续读写 scroll 位置。若同时用 ScrollTrigger 驱动滤镜模糊与 React setState,每一帧都可能触发布局与重渲染。更稳的做法是:滚动数值进 ref,HUD 节流更新,WebGL 在 useFrame 里读共享进度。

离屏必须停

标签页隐藏时仍跑 60fps 粒子是常见浪费。visibilitychange 切到 demand/frameloop 暂停,比只调 canvas 透明度更诚实。移动端默认降到 medium 粒子与关闭重度 Bloom。

验收写成清单

LCP、交互延迟、滚动掉帧、reduced-motion 回退,四项都过才算沉浸页合格。否则再漂亮的银河也只是演示稿。

评论 (0)

暂无评论,来写下第一条吧!