自动化Web页面性能测试介绍

随着越来越多的用户使用移动设备访问 Web 应用,使得 Web 应用需要支持一些性能并不是很好的移动设备。为了度量和测试 Web 应用是不是在高复杂度的情况下,页面性能能满足用户的需求。

同时,随着 Web 应用的空前发展,前端业务逐渐复杂,为了处理这些复杂业务,前后端分离,出现了专门应对这种分离架构的应用开发框架,比如 Angular,React,Vue 等,从而也导致 Web 应用的复杂度大大增加,并出现了 SPA。

1、前端页面性能测试

前端页面性能测试本质上和本地应用性能测试类似,其性能和运行应用的设备的性能强相关,即运行被测系统的硬件性能越强,性能也越强。

所以测试前端页面性能需要找到一个固定配置的硬件来测试其性能基线,然后通过这个基线推测或者计算其他硬件配置下的性能情况。其中在项目开发的过程中持续对一个固定配置的硬件进行性能测试,也可以判断性能在开发过程中趋势,从而第一时间发现性能问题。

而测试性能基线,一般是选用最为普通和常规的配置,而不能选用最为流行的高性能配置,不然得到的基线很容易让测试人员有一种页面性能很高的误解。

前端页面性能一般都是有专业的性能工具来做,比如:免费的 WebPageTest、PageSpeed Insights、SiteSpeed 等。

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

2、Lighthouse

Lighthouse是 Google 开发的一款分析 Web 应用和 Web 页面的性能的工具。除了性能,它还可以分析 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 的方式来使用。这种方式特别适合在集成流水线中使用,用以持续测试前端页面的性能,并检测页面性能随着开发而产生的变化趋势,从而尽早地发现前端页面的性能问题。

3、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 毫米,测试也会通过。

4、总结

随着页面越来越复杂,前端页面的性能测试势在必行。其次随着页面规模越来越大和持续迭代交付的流行,前端页面自动化性能测试一定能节约大量人力成本,并且还能尽早地发现一些性能问题。

最后还需要将其嵌入到前端 Web 应用的功能测试中,从而可以节省其开发成本,并且可以容易地在持续集成流水线上执行,最终实现持续前端页面性能测试。

文章来源:网络 版权归原作者所有

上文内容不用于商业目的,如涉及知识产权问题,请权利人联系小编,我们将立即处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

插入排序

插入排序 概述步骤代码示例输出结果 概述 插入排序是一种最简单直观的排序算法,它的工作原理是通过创建有序序列和无序序列,然后再遍历无序序列得到里面每一个数字,把每一个数字插入到有序序列中正确的位置。 插入排序是一种简单直观的排序…

某马头条——day10

热文章数据查询 分布式任务调度xxl-job 概述 环境搭建 docker化部署 docker run -p 3306:3306 --name mysql57 \ -v /opt/mysql/conf:/etc/mysql \ -v /opt/mysql/logs:/var/log/mysql \ -v /opt/mysql/data:/var/lib/mysql \ -e MYSQL_ROOT_PASSWORDroot\ -d mysql:5.7 dock…

尝试给docker ubuntu22.04镜像添加远程访问桌面

实在时不愿折腾,但是ubuntu 镜像没有桌面,有些操作实在太难受了,效率也不高。硬着头皮上吧。幸亏这是个docker的镜像。要是个虚拟机,这折腾来去,直接崩溃了。docker的好处就是立马就能从头来过,秒级的删除安…

分辨率 时钟频率 lane速率计算

PCLK: pixel clock(像素频率) 计算方法如下: 以1920x1080p/60hz为例,total pixel:2200,total line:1125,filed rate:60Hz,那么:PCLK 2200*1125*60 148.5MHz&#xff1b…

ATF(TF-A)安全通告TF-V11——恶意的SDEI SMC可能导致越界内存读取(CVE-2023-49100)

目录 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) 二、透过事务看本质SDEI是干啥的呢? 三、CVE-2023-49100 1、GICv2 systems 2、GICv3 systems 四、漏洞修复 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) Title 恶意的SDEI SMC可能导致越界内存读取&am…

Spring Security架构

文章目录 过滤器回顾DelegatingFilterProxyFilterChainProxySecurityFilterChainSecurity Filters打印Security Filters将自定义过滤器添加到过滤器链 Handling Security ExceptionsSaving Requests Between AuthenticationRequestCachePrevent the Request From Being Saved R…

Mysql的备份以及恢复

第五章 MySQL的备份及恢复 5.1 MySQL日志管理 在数据库保存数据时,有时候不可避免会出现数据丢失或者被破坏,这样情况下,我们必须保证数据的安全性和完整性,就需要使用日志来查看或者恢复数据了 数据库中数据丢失或被破坏可能原…

Spring SpEL在Flink中的应用-与Filter结合实现数据动态分流

文章目录 前言一、POM依赖二、主函数代码示例三、FilterFunction实现总结 前言 SpEL表达式与Flink fiter结合可以实现基于表达式的灵活动态过滤。有关SpEL表达式的使用请参考Spring SpEL在Flink中的应用-SpEL详解。 可以将过滤规则放入数据库,根据不同的数据设置不…

【c++学习】数据结构中的顺序表

c顺序表 数据结构中的顺序表代码 数据结构中的顺序表 顺序表强调数据的存储结构,表示数据在内存中连续存储。(线性表与链表相对,链表数据在内存中的存储空间是不连续的) 代码 下述代码实现了线性表及其接口 包括增、删、查、改…

《游戏-01_3D-开发》之—人物动画控制器

创建变量, 创建线, 连接, 选中线会变为蓝色,新增变量, 设置线, 双击子层进入子层, 创建变量, 双击SkillPanel 拖拽好之后返回上一层, 依次连接, 设置线&#…

解释LoRA参数

目录 LoRA参数含义 LoRA在深度学习中的作用 示例代码中的LoRA应用 结论 LoRA参数含义 LoRA (lora_r): LoRA代表"Low-Rank Adaptation",是一种模型参数化技术,用于在不显著增加参数数量的情况下调整预训练模型。lora_r参数指的是LoRA中的秩&…

[Tomcat] [从安装到关闭] MAC部署方式

安装Tomcat 官网下载:Apache Tomcat - Apache Tomcat 9 Software Downloads 配置Tomcat 1、输入cd空格,打开Tomca目录,把bin文件夹直接拖拉到终端 2、授权bin目录下的所有操作:终端输入[sudo chmod 755 *.sh],回车 …

springboot(ssm干洗店预约洗衣系统 衣物清洗预约系统Java系统

springboot(ssm干洗店预约洗衣系统 衣物清洗预约系统Java系统 开发语言:Java 框架:springboot(可改ssm) vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7…

docker: 搭建 harbor 镜像仓库

harbor 企业级内网镜像管理软件,加速拉取镜像速度,web 页面管理方便。 系统优化 systemctl stop NetworkManager systemctl disable NetworkManager iptables -F systemctl restart docker安装docker [roottest05 ~]# yum install -y docker-compose…

【GitHub项目推荐--不错的 Go 学习项目】【转载】

开源实时性能分析平台 Pyroscope 是基于 Go 的开源实时性能分析平台,在源码中添加几行代码 pyroscope 就能帮你找出源代码中的性能问题和瓶颈、CPU 利用率过高的原因,调用树展示帮助你理解程序,支持 Go、Python、Ruby 语言。 Pyroscope 可以…

nestjs之适配器模式的应用

NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。在 NestJS 中,适配器模式(Adapter Pattern)主要体现在其对不同类型的 HTTP 服务端框架的适配上。NestJS 本身是建立在 Express 或者 Fastify 这样的底层 HTTP 框架之上的&…

openssl3.2/test/certs - 033 - time stamping certificates

文章目录 openssl3.2/test/certs - 033 - time stamping certificates概述笔记END openssl3.2/test/certs - 033 - time stamping certificates 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! \file my_openssl_linux_log_doc_033.txt\note openssl3.2/test/ce…

《解释与话语权》——西游真假美猴王是自导自演吗

解读与话语权 引言 一旦有人或者组织垄断了话语权,那么什么都可以被重新定义和解读,本篇旨在让读者有更多视角的思考。 为什么一个耶和华能分裂成天主教,东正教,新教等,都是对于圣经和圣经故事的不同解读。 红学那…

解析GPT-3、GPT-4和ChatGPT关系-迈向自然语言处理的新高度“

Hello,小索奇!很高兴为你拓展关于GPT-3、GPT-4、ChatGPT之间关系的信息,以及解释自然语言模型和Transformer的区别。 首先,GPT-3、GPT-4、ChatGPT都是建立在GPT系列技术基础上的自然语言处理模型。它们在不同的代数、性能和应用场…

k8s的图形化工具---rancher

rancher是一个开源的企业级多集群的k8s管理平台。 rancher和k8s的区别:都是为了容器的调度和编排系统。但是rancher不仅可以调度还可以管理整个k8s集群。 rancher自带监控(普罗米修斯) 实验部署 master01 20.0.0.32 node01 20.0.0.34 node02 20.0.0.35 test …