自动化Web页面性能测试介绍-北京尧图网络

随着越来越多的用户使用移动设备访问 Web 应用使得 Web 应用需要支持一些性能并不是很好的移动设备。为了度量和测试 Web 应用是不是在高复杂度的情况下页面性能能满足用户的需求。同时随着 Web 应用的空前发展前端业务逐渐复杂为了处理这些复杂业务前后端分离出现了专门应对这种分离架构的应用开发框架比如 AngularReactVue 等从而也导致 Web 应用的复杂度大大增加并出现了 SPA。1、前端页面性能测试前端页面性能测试本质上和本地应用性能测试类似其性能和运行应用的设备的性能强相关即运行被测系统的硬件性能越强性能也越强。所以测试前端页面性能需要找到一个固定配置的硬件来测试其性能基线然后通过这个基线推测或者计算其他硬件配置下的性能情况。其中在项目开发的过程中持续对一个固定配置的硬件进行性能测试也可以判断性能在开发过程中趋势从而第一时间发现性能问题。而测试性能基线一般是选用最为普通和常规的配置而不能选用最为流行的高性能配置不然得到的基线很容易让测试人员有一种页面性能很高的误解。前端页面性能一般都是有专业的性能工具来做比如免费的 WebPageTest、PageSpeed Insights、SiteSpeed 等。这些功能都能检测前端页面的各种性能指标但是这些工具要么只提供基于在线服务导致安全性无法保证要么安装和配置比较复杂或者无法自动执行导致很难和持续构建流水线集成。Google 开发的免费的 Lighthouse很好地解决了以上的问题。2、LighthouseLighthouse 是 Google 开发的一款分析 Web 应用和 Web 页面的性能的工具。除了性能它还可以分析 Web 页面的 Accessibility各种页面最佳实践Best PracticesSEO 以及 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 应用的功能测试中从而可以节省其开发成本并且可以容易地在持续集成流水线上执行最终实现持续前端页面性能测试。文章来源网络版权归原作者所有上文内容不用于商业目的如涉及知识产权问题请权利人联系小编我们将立即处理

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

相关推荐

SPT-AKI存档编辑器完整上手指南：5分钟读懂单机塔科夫的存档自由玩法

DigitalOcean转型AI工厂：为中小团队打造一站式智能体开发平台

关于文献【26年ACL时间检验奖2】

更多资讯

S7-1200 PUT/GET通信实战：连对、写对、防错三要素

控制器当Git服务器：TwinCAT 3 AdsGitServer版本回退

DeepSeek大模型API接入、流式输出与移动端配置指南

七端口交换板REV 2.1改版拆解：端口拓扑、复位与配置引脚复用

15页5G+VR智慧旅游方案PPT：VR观景台到数据中台的拆解复用

MySQL高阶篇之配置文件详解与各类客户端工具

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？