谷歌浏览器性能查看方法有哪些？

Question

**问题：** 在前端开发中，如何使用 Chrome DevTools 查看和分析网页性能？请列举几种常用的性能查看方法，并说明其适用场景。

Answer 1

使用 Chrome DevTools 查看和分析网页性能

一、基础篇：初识 Performance 面板

Chrome DevTools 提供了强大的性能分析工具，尤其是 Performance 面板，可以记录网页运行时的详细性能数据。

• 打开方式： 右键页面 → 检查 → 切换到 Performance 标签页
• 基本操作： 点击左上角的录制按钮（圆形图标）开始记录，刷新页面或执行操作后再次点击停止录制。

二、中级篇：常用性能分析方法及适用场景

以下是几种常用的性能查看方法及其适用场景：

方法	操作步骤	适用场景
Performance 面板记录	录制页面加载过程，分析加载时间线	整体页面加载优化、首屏渲染优化
Network 面板分析	查看资源加载时间、大小、请求顺序	资源加载瓶颈分析、图片优化
Memory 面板	检测内存泄漏、对象保留树	内存优化、复杂应用调试
Rendering 面板（在 More Tools 中）	启用“Paint flashing”、“FPS meter”等选项	动画性能优化、重绘重排检测
Lighthouse 性能评分	在 DevTools 中切换到 Lighthouse 标签并运行	综合性能评估、SEO、可访问性优化

三、高级篇：深入性能分析流程

使用 Performance 面板进行深入分析时，可以遵循以下流程：

function analyzePerformance() {
  console.time('pageLoad');
  // 模拟页面加载
  window.addEventListener('load', () => {
    console.timeEnd('pageLoad');
  });
}
  

结合 Performance 面板的火焰图（Flame Chart），可以识别出耗时较长的任务，例如：

• 长任务（Long Tasks）
• 强制同步布局（Forced Synchronous Layout）
• 频繁的垃圾回收（Garbage Collection）

四、实战篇：典型性能问题分析流程图

以下是一个使用 DevTools 分析性能问题的流程图：

graph TD
A[打开 DevTools] --> B[选择 Performance 面板]
B --> C[点击录制按钮]
C --> D[刷新页面或触发操作]
D --> E[停止录制]
E --> F{分析火焰图}
F --> G[识别长任务]
F --> H[查找重排重绘]
F --> I[查看主线程阻塞]
G --> J[优化 JavaScript 执行]
H --> K[减少 DOM 操作]
I --> L[拆分长任务]
    

五、扩展篇：结合 Lighthouse 进行自动化分析

Lighthouse 是 DevTools 内置的开源工具，可以自动对页面进行性能、可访问性、SEO 等多个维度的评分。

• 支持生成 JSON 或 HTML 报告
• 可在 CI/CD 流程中集成
• 提供优化建议，如压缩图片、延迟加载等

例如，运行 Lighthouse 的命令行方式：

lighthouse https://example.com --view