在 Chrome 开发者工具（F12）的 **Performance（性能）** 面板中，你可以通过以下步骤导出性能分析报告： --- ### **方法 1：导出完整的性能记录文件（HAR 格式）** 1. 打开 Chrome 开发者工具（F12 或右键页面选择“检查”）。 2. 切换到 **Performance** 标签页。 3. 点击左上角的 **录制按钮（黑色圆形图标）** 开始记录性能数据。 4. 执行你需要分析的操作（例如刷新页面或点击某个功能）。 5. 操作完成后，再次点击 **停止按钮（红色圆形图标）** 结束记录。 6. 在面板顶部的概览区域（Overview），右键点击任意空白处，选择 **Save as HAR with content**。 - 保存的 `.har` 文件包含完整的性能数据（如网络请求、时间线、资源加载详情等）。 - 可以用文本编辑器、HAR 分析工具（如 [HAR Viewer](https://www.softwareishard.com/har/viewer/)）或第三方性能工具打开。 --- ### **方法 2：导出性能快照（Performance 数据）** 1. 在 **Performance** 面板完成录制后，点击左侧面板中的某一次录制记录（例如 `Recording 1`）。 2. 右键点击该记录，选择 **Save profile**。 - 保存的文件格式为 `.json`，包含详细的性能分析数据（如调用堆栈、函数执行时间等）。 - 可以通过 Chrome 的 Performance 面板重新导入（右键 → **Load profile**）。 --- ### **方法 3：生成简化的性能报告（Lighthouse 报告）** 如果需要更直观的网页性能评分和优化建议： 1. 切换到 **Lighthouse** 标签页（Chrome 开发者工具顶部标签）。 2. 选择设备类型（桌面/移动）和需要的测试项（性能、可访问性等）。 3. 点击 **Generate report**，等待测试完成。 4. 点击右上角 **Export as PDF** 保存为 PDF 报告。 - 包含性能评分、加载瀑布图、优化建议等。 --- ### **总结** - **完整数据（HAR）**：适合开发者深入分析网络请求和加载过程。 - **性能快照（JSON）**：适合调试 JavaScript 执行性能。 - **Lighthouse 报告（PDF）**：适合分享给团队或非技术人员的性能总结。 根据需求选择合适的导出方式即可！