前端性能测试工具Lighthouse_lighthouse accessibility-程序员宅基地

技术标签：性能监控技术性能监控性能测试前端性能 # 性能监控性能工具 # 性能测试

在前端开发中，对于自己开发的app或者web page性能的好坏，一直是让前端开发很在意的话题。我们需要专业的网站测试工具，让我们知道自己的网页还有哪些需要更为优化的方面，现在推荐一款工具：Lighthouse，可以分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。

前端页面性能测试本质上和本地应用性能测试类似，其性能和运行应用的设备的性能强相关，即运行被测系统的硬件性能越强，性能也越强。所以测试前端页面性能需要找到一个固定配置的硬件来测试其性能基线，然后通过这个基线推测或者计算其他硬件配置下的性能情况。其中在项目开发的过程中持续对一个固定配置的硬件进行性能测试，也可以判断性能在开发过程中趋势，从而第一时间发现性能问题。而测试性能基线，一般是选用最为普通和常规的配置，而不能选用最为流行的高性能配置，不然得到的基线很容易让测试人员有一种页面性能很高的误解。

前端页面性能一般都是有专业的性能工具来做，比如免费的 WebPageTest、PageSpeed Insights、SiteSpeed 等，这些功能都能检测前端页面的各种性能指标，但是这些工具要么只提供基于在线服务，导致安全性无法保证；要么安装和配置比较复杂或者无法自动执行，导致很难和持续构建流水线集成。Google 开发的免费的 Lighthouse，很好地解决了以上的问题。

Lighthouse 是 Google 开发的一款分析 Web 应用和 Web 页面的性能的工具。是直接集成到chrome开发者工具中的，很多人可能没有意识到这款工具的存在，它位于‘Audits’面板下。首先，你得下载安装了新版chrome浏览器，相信每个做开发的人员都应该拥有chrome浏览器。其次，在chrome浏览器中打开你需要测试的网站，按f12进入开发者调试模式，点击‘Audits’选项，看到如下界面：

除了性能，它还可以分析 Web 页面的 Accessibility，各种页面最佳实践（Best Practices），SEO 以及 Progressive Web App 的能力，对它们打分，并展示出每一项基础项目的数据和结果，如下图：

其中对于性能的分数，它是根据 6 个不同的性能指标计算而得到的，如下图：

而这 6 个性能指标又来于 Chrome DevTool 中的 Performance，点击上图中的“View Original Trace”可以跳转到 Performance，见下图：

所以，Lighthouse 中的 Performance 所计算的分数是真实性能分数，通过这个分数可以了解到这个页面整体的性能情况。

由于 Lighthouse 除了支持通过 Chrome DevTool 和 Chrome Extension 的手动的方式来使用以外，还可以通过 Node CLI 和 Node Module 的方式来使用。这种方式特别适合在集成流水线中使用，用以持续测试前端页面的性能，并检测页面性能随着开发而产生的变化趋势，从而尽早地发现前端页面的性能问题。

Cypress 和 Lighthouse

实施前端页面自动化性能测试最好的方式，就是将它嵌入 Web App 的功能或者端对端自动化测试过程中，当功能和端对端自动化测试执行的过程中就执行了自动化性能测试。Cypress 是当前最为流行的 Web 自动化测试框架之一，它有一款插件 Cypress-Audit 就很好地集成了 Lighthouse 的功能。它能在 Cypress 的自动化测试运行的过程中，针对每张测试过的页面生成 Lighthouse 的性能分数，并展示在 Cypress 的测试报告中。而且还可以针对这些分数做断言，使得当某个页面的分数低于某个阈值的时候，持续构建流水线就会中断，从而通知开发人员或者测试人员对其进行性能分析，从而发现可能存在的性能问题。首先需要在 Cypress 的自动化测试代码中，配置这 6 个性能指标的阈值，比如配置 First Contentful Paint 的阈值时间为 1000 毫秒，配置代码如下：

cy.lighthouse({
  performance: 85,
  "first-contentful-paint": 1000,
  accessibility: 10,
  "best-practices": 10,
  seo: 10,
  pwa: 10,
});

然后在执行 Cypress 自动化测试的过程中，某个页面的指标不满足配置好的阈值，比如 First Contentful Paint 的时间超过了 1000 毫秒，测试就会失败，其测试报告如下图：

然后可以手动在使用 Chrome 浏览器中的 LightHouse 和 Performance DevTools 去分析其性能问题，并通过优化将这个 First Contentful Paint 的时间降到 1000 毫秒以下，其测试就会通过。或者通过分析得知无法提高这个指标，将阈值时间改到 2000 毫米，测试也会通过。

总结

随着页面越来越复杂，前端页面的性能测试势在必行。其次随着页面规模越来越大和持续迭代交付的流行，前端页面自动化性能测试一定能节约大量人力成本，并且还能尽早地发现一些性能问题。最后还需要将其嵌入到前端 Web 应用的功能测试中，从而可以节省其开发成本，并且可以容易地在持续集成流水线上执行，最终实现持续前端页面性能测试。

附上Lighthouse的git地址，更为详细的内容，可以去参考：https://github.com/GoogleChrome/lighthouse

本文链接：https://blog.csdn.net/smooth00/article/details/117459005

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

window10+VS2015 安装与使用GSL的经验_vs2015配置gsl-程序员宅基地

文章浏览阅读3.9k次。大概的内容可以根据http://www.cnblogs.com/JoyPoint/p/7446489.html这个博客进行，下面是我安装的一些经验1. 下载后的gsl-2.4不能直接使用，需要编译安装后才能使用，建议直接放到D盘的根目录2. 根据上述博客的方法下载好这一系列文件（其实就是mingw的安装所需组件）后，需要添加/bin目录以及 mingw64/bin路径添加到系_vs2015配置gsl

【pwn学习】pwn中常用工具_pwn工具-程序员宅基地

文章浏览阅读4.8k次。本文整理了在pwn中常用的一些工具，随着学习的深入也会不断添加_pwn工具

python dicom放大_python3实现对dicom图像处理（图像呈现，缩放，平移）-程序员宅基地

文章浏览阅读620次。dicom图像处理DICOM(Digital Imaging and Communications in Medicine)即医学数字成像和通信。DICOM被广泛应用于放射医疗，心血管成像以及放射诊疗诊断设备(X射线，CT，核磁共振，超声等)。本文主要对dicom图像进行处理。使用工具pycharm,python3pycharm下载地址：python3下载地址：pycharm环境搭建：第三方工具库..._最大值

如何免费访问和使用Gemini API？-程序员宅基地

文章浏览阅读959次，点赞22次，收藏25次。Gemini Ultra具有最先进的性能，在几个指标上超过了GPT-4的性能。它是第一个在大规模多任务语言理解基准测试中超越人类专家的模型，该基准测试57个不同学科的世界知识和解决问题的能力。Gemini是谷歌迄今为止开发的最先进、最庞大的AI模型。它为多模态而建，理解并处理不同类型的数据，比如文本、代码、音频、图像和视频。下面我们将加载Masood Aslami的图像，并用它来测试Gemini Pro Vision的多模态性。有了Gemini可以为查询提供图像、音频和文本，获得几乎完美的答案。

年薪40W+，2018年程序员如何跳出35岁“失业”怪圈?-程序员宅基地

文章浏览阅读1.7k次。时常有人在知乎、百度等平台抛出问题：程序员过了 35 岁（或 40 岁）是不是就失去了竞争力，要转管理岗了吗？当然不是。2018年程序员们将有更多的机会和前景。2018年..._35岁了能从事云计算吗

Linux操作系统~系统文件IO，什么是文件描述符fd？什么是vfs虚拟文件系统_操作系统fd和fds的区别-程序员宅基地

文章浏览阅读1.5k次。我们的输入输出最终都是访问硬件，OS是操作系统的管理者我们使用的都是语言层面上的接口，所以的“语言”上的操作，都必须贯穿OS。然而操作系统不相信任何人，所以访问操作系统都是需要通过系统调用的接口的。因此几乎所有的语言fopen，fclose，fread，fwrite，fgets，fputs，fgetc,fputc等底层一定需要使用OS提供的系统调用上面的 fopen fclose fread fwrite 都是C标准库当中的函数，我们称之为库函数（libc）。而，_操作系统fd和fds的区别

随便推点

判断ResultSet结果集是否为空_安卓resultset如何判断是否有记录-程序员宅基地

文章浏览阅读2.4k次。很多时候我们都要判断ResultSet是否存在记录, 但是java里ResultSet 这个对象没有提供一个方法能判断 ,我们只能用next这个方法, next会滚动一条记录丢失第一条数据, 往往很多时候都需要第一条记录,所以我们要做相应的处理我平常在开发中用到了以下两种形式。第一种方法不及时更新ResultSet 结果集 //sql脚本 String sql="seelect *..._安卓resultset如何判断是否有记录

什么是ECC？ECC 和 RSA 之间有何区别？_ecc和rsa-程序员宅基地

文章浏览阅读1.1k次，点赞30次，收藏18次。椭圆曲线密码学 (ECC) 是一种基于椭圆曲线数学的公开密钥加密算法。它提供了一种执行。继续阅读，进一步了解椭圆曲线密码学，以及为何它被认为是最安全的加密形式。_ecc和rsa

基于Springboot的摄影分享网站系统（有报告）。Javaee项目，springboot项目。-程序员宅基地

文章浏览阅读534次，点赞11次，收藏11次。基于Springboot的摄影分享网站系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。

python读取sav文件_Numpy中数据的常用的保存与读取方法-程序员宅基地

文章浏览阅读462次。小书匠深度学习文章目录:在经常性读取大量的数值文件时(比如深度学习训练数据),可以考虑现将数据存储为Numpy格式,然后直接使用Numpy去读取,速度相比为转化前快很多.下面就常用的保存数据到二进制文件和保存数据到文本文件进行介绍:1.保存为二进制文件(.npy/.npz)保存一个数组到一个二进制的文件中,保存格式是.npy参数介绍numpy.save(file, arr, allow_pick..._python sav

Java学习之日撸代码300行（61-70天，决策树与集成学习）_java300行密度-程序员宅基地

文章浏览阅读321次。原博文：minfanphd任务计划第61天：决策树 (1. 准备工作)第61天：决策树 (1. 准备工作)决策树是最经典的机器学习算法. 其实我不想在后面加上"之一". 它有非常好的可解释性.数据仅有一份. 分裂后的数据子集仅需要保存 availableInstances 和 availableAttributes 两个数组.两个构造方法, 一个读入文件获得根节点, 另一个建立根据数据分裂的获得.判断数据集是否纯, 即所有的类标签是否相同, 如果是就不用分裂了.每个节点 (包括非叶节点) 都_java300行密度

通达OA 与中控考勤机同步最优http方案附源码_通达oa连接中控考勤-程序员宅基地

文章浏览阅读2.1w次，点赞3次，收藏9次。中控考勤机软件可以将考勤机记录实时下载到本地数据库里，很让人恼怒的是考勤机软件经常与设备断开连接，断开还不会自动重连，可考前太差了，之前的几种方案也都无从谈起了。苦思之后，想起直接用考勤机ip访问有web页面。所以有了上面的代码。跨过考勤机软件。只要你的考勤机是中控系列并且能够使用考勤机IP打开web界面就可以使用下面方法，稳定、高效，强烈推荐！使用方法：1，将代码总 19_通达oa连接中控考勤