Chrome DevTools Performance、webpagetest、Lighthouse性能检测

Chrome DevTools Performance、webpagetest、Lighthouse性能检测

Chrome DevTools Performance

Chrome DevTools Performance 主要用于日常开发过程中分析运行时的性能表现。

Lighthouse 用来生成网页的性能评测报告。

WebPageTest

WebPageTest 用来进行整体的网站质量评估、一站式性能评估。

性能测量工具-WebPageTest

WebPagetest的核心是用于测量和分析网页的性能。它是 google 开源项目《make the web faster》的子项目，它本来是 AOL 内部使用的工具，基于BSD开源。

官方网址：https://www.webpagetest.org/

原理

WebPageTest是一个PHP网站，用户输入网址、地点、自定义脚本等信息后，参数发送到后台。后台做些逻辑处理，再通过浏览器相关的代理程序，启动Chrome、Firefox或IE。浏览器执行完后将数据传回给后台，后台再将数据保存起来，最后通过各种形式（图、表格、列等），将分析数据过的数据，呈现给用户。

查看结果地址：https://www.webpagetest.org/result/240601_AiDc45_3QY/

截图如下：

Chrome Devtools

Chrome Devtools中的Performance面板是一个强大的工具，用于分析页面在运行时的性能。

一、开启Performance面板

打开Chrome浏览器，进入想要分析的网页。

按下F12键或右键点击页面，选择“检查”打开开发者工具。

在开发者工具的顶部菜单栏中选择“Performance”选项卡。

二、了解Performance面板

Performance面板提供了一个实时视图，展示了页面加载和运行时的所有活动。通过这个面板，你可以观察到页面加载过程中的网络请求、渲染、JavaScript执行等各个阶段的时间消耗。

面板主要分为以下几个区域：

时间轴：显示了整个页面加载和运行时的过程，每个事件都有对应的时间戳。

网络请求：展示了页面加载过程中所有的网络请求，包括请求的URL、响应时间、文件大小等。

CPU活动：展示了CPU在页面加载过程中的使用情况，帮助你发现CPU密集型操作。

内存使用：提供了关于内存使用的数据，帮助你发现内存泄漏问题。

三、使用Performance面板进行性能分析

1、记录性能数据：在Performance面板中，你可以选择开始记录页面性能数据。有两种方式可以触发数据记录：一种是按下黑色按钮记录交互阶段的性能数据，另一种是按下圆形箭头按钮记录加载阶段的性能数据。

2、设置模拟条件：在分析移动端性能时，你可能需要模拟移动设备的网络环境和CPU性能。在Performance面板中，你可以通过点击“Network”和“CPU”选项卡下的设置按钮来模拟这些条件。例如，你可以选择“Throttle”选项来限制CPU速度，或者选择“Offline”选项来模拟网络延迟或断网的情况。

3、分析数据：在记录了性能数据后，你需要对数据进行深入分析。首先，你可以观察时间轴，找到页面加载和运行过程中的瓶颈所在。其次，查看网络请求，了解哪些资源加载缓慢或占用内存较大。最后，查看CPU活动和内存使用情况，发现是否存在CPU密集型操作或内存泄漏问题。

4、优化建议：一旦你找到了性能瓶颈，Performance面板会提供一些优化建议。例如，它会建议你压缩图片、减少HTTP请求次数、优化JavaScript代码等。这些建议可以帮助你快速找到优化方向。

Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出实践的建议以帮助开发者改进网站的质量。

它能够生成一个有关页面性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。

WebPageTest长截图如下：

👋 感谢您的观看！