MOTION × PERFORMANCE BALANCE
质感与性能的 六项平衡术
很多设计师做出来的动效演示视频好看，一上线到安徽、山东老乡们用的千元安卓机就卡成 PPT。锦盛华东的动效工程师有 6 项祖传平衡技巧，保证江浙沪皖鲁 5 省全设备丝滑。
BALANCE 01-03
CSS 层优先 · 减少重绘
01
只动 transform + opacity
位移、缩放、旋转、透明 —— 这 4 类属性走 GPU 合成层，不触发 layout / paint。动 left/top/margin/width 就会重排重绘，卡顿元凶一律禁用。
02
will-change 预声明 + 用完即收
动效触发前 50ms 加 will-change 声明让 GPU 提前准备层，动效结束 100ms 后立刻移除。长期挂着 will-change 反而显存泄漏、更卡。
03
降级开关 prefers-reduced-motion
尊重系统无障碍设置：用户 Win/Mac 开了「减少动态效果」时，所有 L2/L3 动效自动降级为 L0 静态淡入，不强制动画伤害晕动症用户。
BALANCE 04-06
设备感知 · 分级适配
04
帧率检测动态降档
首屏加载后用 requestAnimationFrame 测 20 帧真实 FPS，连续 < 40 帧的低端设备，L3 自动降级为 L1、L2 降级为 L0，保住核心浏览体验不卡。
05
视口外暂停 + 数据省流
卡片滚出视口 2 屏外立刻暂停 CSS 动画、cancel 掉 RAF 循环；弱网 2G/3G 状态下（navigator.connection.effectiveType）L3 粒子效果直接不加载。
06
华东 8 设备真机帧率验收
交付前必须在 8 台设备上跑 Chrome DevTools Performance 录屏：iPhone SE/红米 Note/华为畅享/荣耀 X 系列等千元机，平均 FPS ≥ 55、最大掉帧 ≤ 100ms 才算合格。
