chrome performance面板录不到真实动画帧，是因为录制时机和方式错误：须先触发动画（如hover/addclass），再用ctrl+shift+p输入record回车启动，禁用扩展、确保前台标签页，并录制完整周期（如2s动画录2.5s），否则无法捕获合成器层关键帧。
Chrome Performance 面板录不到真实动画帧，是因为录制方式错了
不是面板不准，是你启动录制的时机和方式没对上动画生命周期。Chrome 的 Performance 面板默认录制模式（左上角红色按钮）不捕获合成器层信息，而 CSS 动画的帧关键路径在 compositor thread，没它就等于只录了半条流水线。
常见错误是：页面静止时点录制 → 动画还没触发 → 录出来全是空帧或主线程 idle；或者只录 1 秒，但你的 animation-duration 是 2.5s，根本没跑完一整轮。
- 必须先人工触发动画：比如 hover 元素、点击按钮、加 class，等动画真正开始 running 后，再按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入Record并回车 - 录制时长至少覆盖一个完整周期，建议加 0.5s 缓冲；例如
spin 2s ease-in-out infinite，录 2.5s 起步 - 确保页面在前台标签页，系统未休眠，且禁用所有浏览器扩展（尤其广告拦截、性能监控类）
动画掉帧显示为红色竖条，但你可能误读了 FPS 轨道
Performance 面板里 FPS 轨道上的红色竖条，不代表“这一帧卡了”，而是表示该帧渲染耗时 ≥ 16.67ms（即低于 60fps）。真正危险的是连续两帧 ≤ 50fps —— 这时人眼已能感知拖拽感，但很多人只盯着单个红条忽略趋势。
更关键的是：红色竖条本身不告诉你原因。它可能是 JS 同步阻塞、强制 layout、图层合并失败，或只是主线程被其他脚本抢占。
- 优先看
Animation Frame Fired下的Dropped frame条目：有它说明合成器确实没按时交出帧 - 展开该帧，看
Self Time最高的任务：如果是Layout或Recalculate Style，说明动画属性触发了重排 - 如果
Paint时间飙升，大概率是动画中混入了box-shadow、filter或background-color
用了 transform 和 opacity，还是掉帧？检查是否真走合成器
transform 和 opacity 是仅有的两个“默认可合成”属性，但它们不是免死金牌。浏览器是否真把元素扔进独立图层，取决于上下文 —— 很多掉帧问题出在“写了却没升层”。
验证方法很简单：打开 Chrome DevTools → Rendering 面板 → 勾选 Layer Borders。只有带绿色边框的元素，才被提升为独立合成层。
- 没绿框？检查父容器是否设了
overflow: hidden、filter: blur(1px)或will-change: contents，这些会抑制子元素提层 - 动画过程中动态改
box-shadow或filter，可能让浏览器放弃当前图层，退回到 CPU 渲染 - 静态写
will-change: transform在大量列表项上，会导致图层爆炸，低端安卓机直接 OOM 卡死
JS 参与控制的动画，最容易在录制中消失或错位
Chrome Performance 面板对 JS 驱动的动画（比如 requestAnimationFrame + el.style.transform）支持有限。它不会自动关联 JS 调用和最终合成帧，尤其当 JS 执行时间波动大、或帧间间隔不均时，时间轴会断裂、错位，甚至整段动画“不见”。
更隐蔽的问题是：JS 中哪怕只调一次 getBoundingClientRect() 或 offsetHeight，就会强制同步 layout，打断渲染流水线 —— 这种掉帧不会在动画条目里标红，但会在 Layout 任务里暴露出长条阻塞。
- 动画期间绝对禁用任何读取布局的 API；读写操作必须分离：先批量读，再批量写
- 用
el.animate()替代手写requestAnimationFrame，它原生接入合成器调度，时间轴对得更准 - 如果必须用 JS 控制，录制前在 Console 执行
chrome.gpuBenchmarking.runMicroBenchmark("rasterize_and_record_benchmark")可辅助确认 GPU 是否就绪
running 状态 —— 静态声明、animation-play-state: paused、刚结束未重置的动画，都不会出现在 Animation 面板，也不会被 Performance 录制捕获到有效帧。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
