如何诊断多端交互卡顿并优化渲染管线与动画

# 核心结论

诊断多端交互卡顿，不能只看平均帧率，而应围绕“输入何时发生、主线程何时开始处理、状态何时提交、下一帧何时真正显示”建立完整链路。以 60Hz 屏幕为例，一帧理论周期约为 16.7ms，但业务可用预算还要扣除系统调度、光栅化、合成和显示开销；在 120Hz 设备上预算约为 8.3ms，要求更严格。正确方法是先稳定复现，再把卡顿拆成输入分发、业务计算、状态更新、构建、样式计算、布局、绘制、光栅化、合成和显示等阶段，判断瓶颈位于哪个线程，而不是看到掉帧就盲目减少代码或增加图层。

# 底层机制

在 Web 中，输入处理、JavaScript、样式计算、布局和部分绘制通常竞争主线程。单次任务