Chrome DevTools Performance面板导出的是含时间线、帧信息、CPU调用栈等的JSON文件，通过“Save profile”保存，支持离线加载分析，但不含内存快照或截图。
Chrome DevTools 的 Performance 面板本身不支持直接“导出快照”为独立文件供离线分析，但它提供了一种标准、可移植的 JSON 格式录制数据，能完整保存时间线、帧信息、CPU 调用栈、网络请求等，完全满足离线复现与协作分析需求。
如何导出 Performance 录制结果（.json 文件）
- 点击 Performance 面板右上角的 三个点菜单（⋯）
- 选择 “Save profile”（保存配置文件）
- 浏览器会下载一个
.json文件（例如profile-20260706T225831.json），这就是完整的性能录制数据
这个文件可在任意一台安装 Chrome 的设备上重新加载：
- 打开 DevTools → Performance 面板
- 点击右上角 ⋯ → “Load profile”
- 选择刚才保存的
.json文件即可还原全部视图（包括火焰图、FPS 曲线、主线程任务、网络瀑布流等）
导出内容包含哪些关键信息？
- 页面加载全过程的时间线（含
DOMContentLoaded、LCP、FCP、Load等标记） - 每一帧的渲染耗时与丢帧位置
- 主线程任务堆栈（JS 执行、样式计算、布局、绘制、合成）
- 网络请求时间与资源类型分布（可配合 Network 面板逻辑还原）
- 内存分配采样（若启用了 Memory recording 选项）
注意：Performance 录制默认不包含内存快照（Heap Snapshot）或屏幕截图。如需内存对比，需单独切换到 Memory 面板手动拍快照并导出
.heapsnapshot文件。
离线分析的小技巧
- 用文本编辑器打开
.json文件，可快速搜索关键词（如"duration"、"functionName"、"url"）定位长任务 - 在团队协作中，把
.json文件发给同事，对方无需复现场景就能精准定位 JS 函数耗时或布局抖动源头 - 配合 Lighthouse 生成的
.lhr.json报告，可交叉验证核心 Web 指标（如 TTFB、CLS）是否与 Performance 时间线一致
不复杂但容易忽略
