录制前必须清理环境、模拟真实设备、勾选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 调用栈。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
火焰图里黄色长条不等于“JS 写得差”，先看它在主线程哪一段
Performance 面板默认展示的是主线程（Main）轨道，但很多耗时操作其实不在 JS 执行里——比如强制同步布局、样式重计算、GPU 合成阻塞。
- 横向宽度 > 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 修改——这种模式在火焰图里是断开的，但时间轴上紧挨着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
