性能分析工具
- Lighthouse：站在“真实浏览器渲染”的角度看性能（FCP/LCP/TBT/CLS/Speed Index 等）
- curl：站在“网络请求链路”的角度看性能（TTFB、重定向、下载速度、连接耗时等）
- Chrome DevTools
- 网页性能指标分析（pagespeed）：https://pagespeed.web.dev/
Lighthouse
Lighthouse 是一款自动化的开源工具，可帮助您提升网页质量。您可以在任何网页（公开网页或需要身份验证的网页）上运行该脚本。该工具可针对性能、无障碍、搜索引擎优化 (SEO) 等方面进行评估
DevTools Lighthouse 对比 Lighthouse Cli
- DevTools 版适合“单次人工手动分析”，CLI 版适合“工程化、自动化、团队使用”。
| 对比项 | Chrome DevTools Lighthouse | npm Lighthouse（CLI） |
|---|---|---|
| 使用难度 | ✅ 最简单 | ⚠️ 需要 Node 环境 |
| 是否适合开发调试 | ✅ 非常适合 | 一般 |
| 是否适合 CI / 自动化 | ❌ 不适合 | ✅ 强烈推荐 |
| 是否可自定义 config | ❌ 基本不能 | ✅ 完全可控 |
| 是否可批量跑 | ❌ 不能 | ✅ 可以 |
| 是否可做性能对比 | ⚠️ 手动对比 | ✅ 可脚本化 |
| 是否可自定义审计 | ❌ 不支持 | ✅ 支持 |
Lighthouse Cli
npm install -g lighthouse
# 指定地址输出性能报告
lighthouse https://example.com
# 指定本地地址、指定格式输出性能报告
lighthouse http://localhost:3000 --view --locale=zh
参数说明
常用参数
- 输出文件路径： --output-path
- 输出文件语言格式： --locale
- 打开浏览器：--view
| 参数 | 作用 | 常见场景 | 示例 |
|---|---|---|---|
--output | 输出格式：html / json / csv | 自动化或生成报告 | --output=html |
--output-path | 输出文件路径 | CI 或保存报告 | --output-path=./report.html |
--view | 运行后浏览器自动打开报告 | 本地调试 | --view |
--quiet | 减少日志输出 | CI 环境 | --quiet |
--verbose | 输出详细日志 | 排查问题 | --verbose |
--save-assets | 保存 trace 和 devtools 日志 | 深度性能分析 | --save-assets |
--locale | 指定语言输出 | 语言格式 | --locale=zh |
PageSpeed
- PageSpeed Insights 是在单独服务器上运行，对比lighthouse 结果通常会更“干净”、更一致
- PageSpeed 展示真实用户数据情况
- 用户打开的数据 和源数据
- 基于实际数据，也就是网站在真实环境中用户设备上的表现
- PageSpeed Insights 解决“线上用户实际情况怎么样”。
Performance
调试性能问题时，更推荐用 Performance 面板，而不是只看 Lighthouse。 因为 Performance 能看到更细的轨迹、主线程长任务、样式计算、LCP 元素、渲染阻塞链路
- Lighthouse 负责告诉你“哪里可能有问题”
- Performance 负责告诉你“为什么会慢、慢在哪一段”
curl
- curl 不能直接给 FCP/LCP（因为不渲染页面），但能快速知道“慢是不是因为服务端/网络”的问题
- curl 看 TTFB（服务器首字节时间）
- curl 看首屏 HTML 是否压缩 & 缓存
- 压缩与缓存都体现在响应头（headers）
- 对关键资源逐个 curl
- Network 里找最大 JS/CSS/首屏大图 URL，对每个都跑一次
curl -w，就能定位是某个大包拖慢还是通用链路慢
- Network 里找最大 JS/CSS/首屏大图 URL，对每个都跑一次