录制前必须清理环境、模拟真实设备、勾选Screenshots和Memory选项；Performance面板需用无痕窗口、设置CPU限速，按分析目标选择录制方式，关注Long Tasks与主线程耗时分布。

直接开始录制前必须做的三件事

不清理环境、不模拟真实设备、不勾选关键选项，录出来的数据基本没法用。Performance 面板不是“点一下就出结论”的工具，它对前置条件非常敏感。

• 用无痕窗口（Ctrl+Shift+N 或 Cmd+Shift+N）打开页面，避免插件干扰 CPU 和内存采样
• 在 Performance 面板右上角 ⚙️ → CPU Throttling 选 4x slowdown 或 6x slowdown，否则桌面端的高帧率会掩盖移动端的真实卡顿
• 录制前务必勾选 Screenshots（截图）和 Memory（内存），否则无法关联视觉卡顿与内存增长，也看不到哪一帧画面突然变灰或撕裂

录制时别只点一次“Record”，要匹配你的分析目标

两种启动方式对应完全不同的分析场景，混用会导致指标错位。

• 点击左上角圆形 Record 按钮：适合分析用户主动触发的行为，比如点击按钮后动画卡顿、滚动列表时掉帧。操作前开始录，操作完成立刻停，时间控制在 2–5 秒内最易定位
• 点击旁边的 Start profiling and reload page：专用于页面加载性能，它会在 DOMContentLoaded 和 load 事件后自动停止，适合查首屏白屏、资源阻塞、JS 执行拖慢渲染等问题

常见错误：想看点击后的动画却用了 reload 录制，结果录到的是 HTML 解析阶段，根本找不到你写的 requestAnimationFrame 调用栈。

火焰图里黄色长条不等于“JS 写得差”，先看它在主线程哪一段

Performance 面板默认展示的是主线程（Main）轨道，但很多耗时操作其实不在 JS 执行里——比如强制同步布局、样式重计算、GPU 合成阻塞。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 横向宽度 > 50ms 的黄色/红色块，先看它上方的标签：Layout 表示重排，Recalculate Style 表示样式重新计算，Paint 是绘制，Composite Layers 是图层合成
• 如果是 Script Evaluation 占大头，再双击进去看 Bottom-Up 标签页，重点关注 Self Time 最高的函数——注意不是总时间，是它自己执行耗时，排除被调用方干扰
• 若看到大量 Forced Synchronous Layout 提示，说明代码里有类似 el.offsetHeight + el.style.top = ... 这种读写交替，浏览器被迫反复 layout

别忽略 Summary 面板里那行小字：“Long Tasks”

Chrome 把超过 50ms 的主线程任务标记为 Long Task，这是 RAIL 模型里影响响应（Response）的关键阈值。它不会高亮显示，但 Summary 面板顶部会写一行：12 long tasks (≥ 50ms)。

• 点开任意一个 Long Task，看它的起始时间是否和你操作的时间吻合（比如点击后 200ms 才开始）
• 在 Main 轨道里找到对应时间段，拖选整段，右键 → Zoom to selection，放大后更容易看清嵌套关系
• 如果多个 Long Task 连续出现，大概率是 JS 循环中做了 DOM 查询或样式读取，而不是单个函数太重

真正难排查的，往往不是某一行 for 循环，而是连续三次 getBoundingClientRect() 调用之间穿插了 DOM 修改——这种模式在火焰图里是断开的，但时间轴上紧挨着。