Performance面板和Lighthouse面板都是谷歌浏览器开发者工具中的重要组成部分，它们各自具有独特的功能和用途，主要区别如下：

一、功能定位

1. Performance面板

   • 主要用于记录和分析网页在运行时的性能数据。
   • 允许开发者深入了解网页的加载、JavaScript执行、渲染、绘制等各个方面的性能表现。

2. Lighthouse面板

   • 用于自动化分析网站加载时存在的性能问题，并提出推荐的优化方案。
   • 它的前身是Chrome DevTools面板中的Audits，能够收集网站加载时的性能数据，并根据最佳实践来给每一项进行打分，同时针对低分项给出对应的优化建议。

二、使用场景

1. Performance面板

   • 适用于分析网页在特定操作或加载过程中的性能瓶颈。
   • 开发者可以通过录制网页的运行过程，然后分析FPS（每秒帧数）、CPU占用、网络请求等关键性能指标，找出潜在的性能问题。

2. Lighthouse面板

   • 适用于对网站进行全面的性能评估和优化建议。
   • 开发者可以快速了解网站在加载过程中的整体性能表现，并根据Lighthouse提供的优化建议进行改进。

三、主要特点

1. Performance面板

   • 提供了详细的时间轴图表和性能数据，方便开发者进行深入分析。
   • 支持对网页的加载和运行过程进行录制和回放，便于重现和分析性能问题。

2. Lighthouse面板

   • 自动化程度高，能够快速生成全面的性能评估报告。
   • 报告涵盖了性能、可访问性、最佳实践、搜索引擎优化等多个方面，为开发者提供了全方位的优化建议。

四、分析过程与结果呈现

1. Performance面板

   • 分析过程相对繁琐，需要开发者具备一定的性能分析知识和经验。
   • 结果呈现为详细的时间轴图表和性能数据，开发者需要自行解读和分析。

2. Lighthouse面板

   • 分析过程简单快捷，只需运行一次测试即可生成全面的性能评估报告。
   • 结果呈现为直观的得分和详细的优化建议，开发者可以快速了解网站的性能表现和改进方向。

Lighthouse和Performance面板都是Chrome开发者工具中用于性能检测的重要工具，它们各自具有独特的使用方式和检测指标。

Lighthouse的使用方式和检测指标

1. 使用方式

   • Chrome调试面板：在Chrome浏览器的开发者工具中，可以直接找到Lighthouse面板（在Chrome 60及以后的版本中，Lighthouse被整合进了Audits面板）。
   • Chrome插件扩展：可以从Chrome的应用商店下载Lighthouse扩展程序，并在需要测试的页面上使用。
   • 命令行：通过npm安装Lighthouse，然后在命令行中运行相关命令来生成性能报告。

2. 检测指标

   • Lighthouse会对页面性能、PWA（渐进式Web应用）、可访问性（无障碍）、最佳实践、SEO等五个维度进行评估，并给出相应的分数（0-100分）。
   • 分数分为三个档次：0-49分（慢，红色）、50-89分（平均值，橙色）、90-100分（快，绿色）。
   • Lighthouse还会针对性能问题给出可行的建议，以及每一项优化操作预期会节省的时间。

Performance面板的使用方式和检测指标

1. 使用方式

   • 打开Chrome浏览器的开发者工具，切换到Performance选项卡。
   • 点击左上角的Record（小圆点）按钮开始录制，此时Performance会记录用户的交互以及这些交互对页面性能数据的影响。
   • 录制完成后，点击Stop按钮停止录制，并生成性能报告。

2. 检测指标

   • FPS（Frames Per Second）：每秒帧数，与动画性能密切相关。绿色长条越高，说明FPS越高，用户体验越好。
   • CPU：显示了页面加载过程中，各阶段对CPU的占用时间。不同的颜色片段代表着消耗CPU资源的不同事件类型，如网络通信和HTML解析（蓝色）、JavaScript执行（黄色）、样式计算和布局（紫色）、重绘（绿色）等。
   • NET：展示了各请求的耗时与前后顺序。每条彩色横杠表示一种资源，横杠越长，检索资源所需的时间越长。浅色部分表示等待时间，深色部分表示传输时间。
   • Main：火焰图，展示了主线程在录制过程中做的所有事情，包括Loading、Scripting、Rendering、Painting等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短。如果某个长条右上角是红色的，则表示该函数存在性能问题，需要重点关注。
   • 其他指标：如DOMContentLoaded和load事件，分别表示HTML文档加载完成和页面上所有资源加载完成的时间点。

Lighthouse和Performance面板都是强大的性能检测工具，它们各自具有独特的使用方式和检测指标。开发者可以根据需要选择合适的工具来优化页面的性能。