Chrome 浏览器如何导出当前网页的性能追踪文件：DevTools Performance 录制、保存与复查

页面卡顿时，先别急着凭感觉改 JavaScript。Chrome DevTools 的 Performance 面板可以把一段真实交互录成追踪文件：从打开测试页面、设置 CPU 模拟，到停止采样和保存结果，整个过程可以交给同事复查。下面只做一个任务——导出当前网页的一份性能追踪文件，并检查它确实包含时间轴和 Summary 数据。

先准备一个能重复触发的页面

性能追踪最怕“第一次很慢，第二次正常”，最后只剩一份无法解释的文件。官方教程用 Chrome DevTools Samples 的 Janky Animation 页面做演示，它会持续移动蓝色方块，适合观察脚本、渲染和绘制活动。自己的业务页面也可以使用同样方法，但要先固定入口、操作动作和测试数据。

第1步：打开官方性能面板说明并确认入口

1. 打开 Chrome for Developers 的 Chrome DevTools → 分析运行时性能页面。
2. 确认页面侧栏高亮“分析运行时性能”，并看到“开始使用”“记录运行时性能”“分析结果”等章节。
3. 如果使用自己的网页，把待测地址单独打开；不要把无关标签页、登录信息或隐私数据带进截图和追踪文件。

看到页面标题和右侧章节导航，说明入口已找对。官方页面提示不同 Chrome 版本的 DevTools 界面可能有差异，教程中的按钮名称应以当前版本实际显示为准。

按固定条件打开 DevTools Performance

第2步：从页面打开 DevTools 并切到 Performance

1. 在无痕窗口中打开待测页面。官方示例使用 https://googlechrome.github.io/devtools-samples/jank/。
2. Mac 按 Command+Option+I，Windows 或 Linux 按 Control+Shift+I 打开 DevTools。
3. 在 DevTools 顶部选择 Performance 标签；如果标签被折叠，先展开右侧的更多标签。

截图中能同时看到测试页面、DevTools 标签栏和 Performance 入口，说明待测页与分析面板已建立对应关系。切换页面后再录制，追踪文件里的 URL 和操作就可能不是同一件事。

第3步：设置采样条件并检查录制按钮

1. 在 Performance 面板中打开设置区域，按需要启用 Screenshots；它用于把页面画面放进时间轴，方便对照视觉变化。
2. 在 CPU 下选择一个明确的模拟档位，例如官方示例使用 4× slowdown。如果只是比较两次改动，前后必须保持相同档位。
3. 确认面板顶部的圆形录制按钮可用，再开始执行一套固定操作，例如点击页面上的 Add 10 多次后停止动画。

看到 Performance 标签、Screenshots 复选框和 CPU 模拟值，就是设置已落在录制面板中的可见状态。不要一边改 CPU、一边比较两份结果，否则时间轴差异无法归因。

录制并保存一份可复查的追踪文件

第4步：开始录制、停止采样

1. 点击 Performance 面板顶部的录制按钮。
2. 立即按预先写好的动作触发页面问题；动作结束后点击停止，不要把无关等待时间也录进去。
3. 等待面板完成分析。录制状态消失、时间轴出现 Main、Thread Pool 或 GPU 等轨道时，说明本次采样已经生成结果。

录制时的 Profiling 状态和 Stop 控件是关键证据。若页面操作尚未结束就停止，文件仍然可能生成，但它只能说明半段动作，不能拿来和完整流程比较。

第5步：在分析结果中保存追踪文件

1. 录制结束后先观察时间轴范围，确认它覆盖了刚才的动作。
2. 在 Performance 面板使用保存追踪的按钮，将文件保存到项目约定的临时目录；文件名写明页面和测试条件，例如 checkout-4x-before.json。
3. 重新打开保存的追踪文件，确认仍能看到时间轴、Summary 以及 Bottom-Up、Call Tree 等分析视图。

图中时间轴和 Summary 已经出现，Total、Scripting、Rendering 等耗时可用于下一步排查。保存动作的验收不是“目录里有一个 JSON 文件”，而是这个文件重新载入后仍能展开同一段时间范围。

复查结果时先看证据，再下性能结论

Summary 适合先看总耗时和脚本、渲染、绘制的分布；Bottom-Up 可以追到消耗时间的底层调用，Call Tree 则更适合顺着调用关系回看入口。若只是看到总耗时变大，还不能直接断定某一个函数有问题，至少要结合操作时间点和主线程轨道一起判断。

常见问题

为什么录制按钮点了却没有有用数据？

常见原因是录制时间太短、没有触发目标动作，或者打开的不是实际待测页面。先清空旧结果，重新打开页面，再按固定动作录一遍，并检查时间轴是否覆盖动作。

CPU 选择 4× slowdown 后，结果能代表真实用户吗？

它是用于模拟较慢设备的测试条件，不等于真实用户的统一硬件。它适合做前后对比，但比较时要保持同一 Chrome 版本、页面数据和 CPU 档位。

保存的追踪文件能不能直接当成性能报告？

不能。追踪文件是证据材料，仍需说明页面、操作、设备条件和采样设置。只有把时间轴热点与代码、网络或渲染原因对应起来，才形成可执行的性能判断。

导出完成后的四项验收

• 文件来自当前页面和当前这套操作，名称包含测试条件。
• 重新载入后仍能看到时间轴和至少一个分析视图。
• 截图或追踪文件没有包含登录凭据、个人信息和无关标签页。
• 记录了 Chrome 版本、CPU 模拟、Screenshots 设置和操作步骤，方便别人复查。