录了十秒 Performance 主线程轨道上密密麻麻全是红三角 每个都标着 Long Task 最长的 480 毫秒 页面滚动时肉眼能看到明显掉帧。乍看像缓存或者权限的锅，追下去往往不是。
npx lighthouse example.com --preset=desktop --view # 或直接在 DevTools Performance 录制后看 Main 轨道
追下去是这么回事：超过 50 毫秒的任务就会被标红 这条里同时做了 DOM 查询 样式写入和批量建节点 读写交替还会触发强制同步布局 时间被成倍放大。
碰到「长任务判定」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。一次只改一处，改完立刻验证，几个改动叠在一起，出问题就说不清是谁导致的。
先做最小复现，能稳定跑出来的问题，排查成本会低一个数量级。
具体做法是，点开最长那条任务 在底部 Bottom-Up 里看哪个函数占用的时间最多；把大批量 DOM 操作拆成每帧一批 用 requestAnimationFrame 按帧分几次推进；把读取布局属性的动作集中到写入之前 避免读写交替触发同步布局。
验收就看一点，录同样的操作 最长任务压到 50 毫秒以下 红三角只剩零星几个。