页面动效运行异常时的降级处理生成艺术和模糊滤镜很容易让首屏有记忆点也很容易在旧设备上变成负担。我的原则是内容先可用动效是可撤销的增强。用户开启“减少动态效果”时直接给静态版本不必再做性能试探。帧率只是信号不是设备性能标签。后台标签页、节能模式和临时主线程占用都会让采样失真所以降级应可逆并尽量避免频繁切换。const reduced matchMedia((prefers-reduced-motion: reduce)); function setMotionMode(mode) { document.documentElement.dataset.motion mode; } if (reduced.matches) setMotionMode(off); reduced.addEventListener(change, ({ matches }) { setMotionMode(matches ? off : full); });.hero-art { background: linear-gradient(135deg, #14213d, #273469); } [data-motionfull] .hero-art::before { content: ; animation: drift 10s ease-in-out infinite alternate; } [data-motionoff] .hero-art::before { animation: none; } keyframes drift { to { transform: translate3d(2%, -2%, 0); } }排查时先用 DevTools 的 Performance 和 Layers 面板看实际的长任务、绘制和图层不把某个固定 FPS 当作判定线。will-change只在短时间动画中使用Canvas 或 WebGL 要有 CSS 或 SVG 替代并处理webglcontextlost。这套方案不承诺所有设备一样流畅但能在资源紧张时保住阅读和操作。