动画首次播放卡顿但后续流畅时如何定位着色器与资源准备成本

# 核心结论

动画只有第一次播放卡顿、后续播放流畅，通常说明稳定态帧预算并非主要矛盾，首次路径上存在一次性或可缓存的准备成本。常见来源包括图片解码、纹理上传、字体字形生成、着色器编译、渲染管线创建、组件或运行时懒初始化以及代码即时编译。定位时必须保留冷状态并捕获第一次触发过程，分别观察主线程构建、渲染线程提交和图形处理器执行，不能用多次播放后的平均帧率掩盖首次尖峰。优化也不是无条件预热全部资源，而是在首次动画流畅度、启动时间、内存、包体、耗电和缓存命中率之间做预算分配。

# 底层机制

在Web中，动画首次触发可能伴随样式计算、布局、绘制、图层提升和图片解码。修改宽高、位置等影响几何关系的属性，通常会扩大布局或绘制范