60 帧也卡：React 动画的慢有四种不同的慢

📋 概述

你打开性能面板，动画稳定在 60 FPS，没有刺眼的红色警告，笔记本甚至没怎么费力，但交互还是觉得慢：光标像在追指针而不是跟着走，滚动出现的元素总比你预期晚半拍，可拖动的卡片和手之间有一层橡胶感，菜单技术上很流畅，但打开就是比不动画时更沉。作者说，这正是帧率计数器会把你带偏的地方：60 FPS 只告诉你收到了多少帧，不告诉你这些帧到得好不好。动画质量是帧一致性、输入延迟、浏览器渲染工作量、JavaScript 执行和你自己做出的动效决策共同作用的结果，所以更该问的问题是「你面对的是哪一种慢」。他还提醒不要按每秒恰好 60 次更新来写死动画：120Hz 与 144Hz 屏已经足够常见，requestAnimationFrame 可能以那样的频率被调用，应该用回调传入的时间戳算进度，让时长与刷新率解耦。