常见的性能分析工具有以下几种：

1. Lighthouse：性能评分、优化建议
2. Chrome Devtools Performance：火焰图、帧率变化、网络链路等细粒度性能分析
3. Bundle Analyzer：产物分析
4. React Devtools Profiler：组件级分析

每种工具针对不同的分析方向，实际场景需要组合运用。

Lighthouse

输出多维度指标打分，包括性能、可访问性、最佳实践、SEO、PWA，并提供优化建议

适用场景：

• 无线上埋点可看，需要评估当前性能状态
• 进行性能优化，需要评估优化后效果

工具使用：

• Chrome Devtools 自带 Lighthouse，开启无痕模式测试 5 次，去除极值后取均值。
  • 优点：直观、方便
  • 缺点：手动统计
• lighthouse npm 包 (opens new window)
  • 优点：支持定制，方便统计
  • 缺点：不够直观，有额外使用成本

Chrome Devtools Performance

基于 Chrome Devtools 的 Performance 工具，输出火焰图、帧率变化、网络链路、渲染截图 等全链路数据，方便细粒度分析

适用场景：

• 分析数据请求耗时瓶颈（网络链路）
• 分析函数执行耗时瓶颈（火焰图）
• 分析 FPS 和页面卡顿情况，关注长任务（帧率变化 & 火焰图）

工具使用：

• 火焰图：横向是时间戳（耗时），纵向是调用栈

前端性能优化——Performance的使用攻略 (opens new window)：这篇文章通过一个官方demo (opens new window) 讲解了 Performance 的使用。通过帧率图定位问题位置，通过火焰图查看分析函数耗时，并最终找到了性能卡点 - 重排导致的渲染耗时。

Bundle Analyzer

对构建产物进行分析，查看模块体积大小和占比

适用场景：

• 分析产物体积，方便裁剪优化，关注是否按需引入，更轻量的包代替

工具使用：

• 对于 Webpack 项目，可以集成 - webpack-bundle-analyzer (opens new window) 插件，打包时将输出分析报告

React Devtools Profiler

React Devtools 调试工具的 Profiler 模块；其他框架比如 Vue 也有类似的工具。

适用场景：

• 分析组件渲染耗时，避免重渲染问题

工具使用：

• 开启录制，操作页面，会收集组件耗时
• 观察组件耗时是否符合预期，并针对不必要的重渲染进行优化

其他

• perfsee (opens new window)：字节开源的性能分析工具，原 maiev，集成了 bundle 分析、lighthouse 评估、可视化火焰图等工具。