Firefox Profiler精准定位滚动性能瓶颈：先按Ctrl+Shift+E唤起，勾选Screenshots和JavaScript samples、取消Memory、采样间隔设为0.5ms；再通过Shift压制滚动或脚本复现真实场景；最后分三层分析丢帧区间、主线程长任务和布局污染，识别JS过载、样式雪崩或合成层失效三类根因。
Firefox DevTools 的性能分析器（Profiler）不是看“哪里慢”，而是帮你确认“为什么慢”——关键在主线程调度、渲染流水线和样式计算三者的交互细节。它不只告诉你某个函数耗时长，更揭示这个耗时是否打断了帧节奏、是否触发了意外重排、是否挤占了其他任务的执行窗口。
打开并启动精准录制
按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS）直接唤起 Profiler，比从菜单进入更快、更稳定。点击 Start Recording 前，务必点右上角齿轮图标进 Capture Settings：
- 勾选 Screenshots 和 JavaScript samples：截图帮你对照卡顿帧，JS采样是定位脚本热点的基础；
- 取消勾选 Memory：滚动类性能问题极少由内存分配引发，开它反而降低采样精度；
- 把 Sampling interval 改为 0.5ms：默认1ms会漏掉 requestIdleCallback、IntersectionObserver 等微任务调度抖动，而这类抖动正是复杂滚动卡顿的常见诱因。
捕获真实滚动行为
静态加载数据没用，瓶颈只出现在滚动过程中。两种方式确保你录到的是真实压力场景：
- 手动滚动 + Shift 键压制：持续滚动时按住 Shift，强制浏览器以约10fps低帧率渲染，放大卡顿帧，让主线程阻塞更容易被捕获；
-
脚本驱动复现：在 Profiler 开始录制后，在控制台粘贴执行：
function smoothScroll(){window.scrollTo({top:document.body.scrollHeight,behavior:'smooth'});setTimeout(()=>{window.scrollTo({top:0,behavior:'smooth'});},3000);}smoothScroll();
它能触发3秒匀速滚动再回弹，保证操作可重复、边界清晰。
三层过滤定位根因
别一上来就翻 Call Tree。先聚焦时间线，再层层下钻：
- 第一层：找丢帧区间——拖选滚动开始后500ms内的时间段，看 FPS 曲线是否跌破45fps；出现红色竖条（vsync missed）的位置，就是渲染被严重延迟的起点；
- 第二层：锁主线程长任务——切到 Main 轨道，找宽度 ≥30ms 的黄色/红色块；右键 → Zoom to selection，然后在 Call Tree 中按 Self Time 降序排列，排第一的函数才是直接耗时源，不是它的调用者；
- 第三层：验布局污染——切换到 Bottom-Up 视图，展开 Layout 节点，搜索是否有非预期的 Recalculate Style 或 Layout 频繁出现；一次滚动若触发超过5次 Layout，基本可判定存在样式雪崩或强制同步布局（layout thrashing）。
识别三类典型模式
多数滚动卡顿逃不出这三种逻辑结构：
- JS 过载：Call Tree 里某业务函数 Self Time 占比超60%，且嵌套深、无明显异步分片，说明计算逻辑未做时间切片或防抖；
- 样式雪崩：Bottom-Up 中 Recalculate Style 子项数量多、耗时分散，常伴随大量通配符选择器、CSS 变量滥用或频繁修改 classList；
- 合成层失效：Screenshots 轨道中帧与帧之间内容突变、无渐变过渡，同时 Main 轨道 Paint 时间异常高，说明本该走 GPU 合成的元素被降级到 CPU 绘制，通常因 transform/opacity 外属性被修改或 will-change 误用。
