如何利用 Chrome DevTools 帧记录精确找出长列表滚动卡顿的根源？

本文共计817个文字，预计阅读时间需要4分钟。

直接卡在点一下就录中，无法录制到真实瓶盖问题。滚动是持续事件，必须让DevTools捕获完整的交互周期：

不这么做，容易漏掉 _move 或 requestAnimationFrame 中的短时高频任务；CPU 节流不开，长任务可能压根不显红，误判“没瓶颈”。

在火焰图里盯住 Main 线程的红色长任务

停止录制后，展开 Main 线程轨道，垂直扫描所有标红的长条（Chrome 标记为 Long Task >50ms）。这不是看“哪段 JS 名字长”，而是聚焦三类典型阻塞源：

• Recalculate Style 和 Layout 高频出现 → 说明滚动中反复读写 offsetHeight、getBoundingClientRect() 或触发强制同步布局
• 堆栈里含 _translate、scrollerStyle.transform 但耗时突增 → 很可能 CSS 层面用了 transition: all 或未启用 will-change: transform
• 函数名含 render、update、diff 且持续 >30ms → 虚拟列表未生效，或组件在滚动中做了非必要状态更新（比如监听了 scroll 事件却没节流）

用 Summary 面板交叉验证 FPS 与渲染阶段耗时

顶部 Summary 面板不是摆设。