H5性能测试以及H5性能测试工具

背景

背景由于公司最近项目有一个H5测试项目，功能测试不用多说，但是H5性能测试是一个大难题，于是研究下H5性能测试，下面总结下，希望能帮助自己回顾项目也希望能帮到测友。

总结

H5性能测试的常用指标：

白屏时间：用户首次看到网页内容的时间，即第一次渲染流程完成的时间；
首屏时间：用户看到第一屏，即整个网页完全显示出来的时间；
首资源下载时间：从开始下载第一个资源到下载完成的时间；
总资源下载时间：从开始下载到所有资源下载完成的时间；
用户可操作时间：从页面开始加载，到用户能够操作界面的时间。

H5性能测试工具

下面以chrome 浏览器为例：
通过chrom 应用商店搜索Lighthouse 下载安装后，打开需要测试的网页—打开F12—选择Lighthouse选项—点击分析网页加载情况，即开始分析H5网页性能，并且生成性能测试报告。

相关指标的含义：
首次内容绘制（First Contentful Paint）：即浏览器首次将任意内容（如文字、图像、canvas等）绘制到屏幕上的时间点；
最大内容绘制（Largest Contestful Paint）：表示可视区最大的可见元素开始出现在屏幕上的时间点；
总得阻塞时间（Total Blocking Time）：表示此次分析过程中遇到阻塞时间；
可交互时间（Time to Interactive）：指所有的网页内容已经成功加载完成，且能够快速对用户的操作做出反应的时间点；
速度指标（Speed Index）：衡量了首屏可见内容绘制在屏幕上的速度，在首次加载页面的过程中尽量展现更多的内容，往往能够给用户带来更好的体验，所以速度指标的值越小越好；
Cumulative Layout Shift：简称CLS。即累计布局偏移量。

借助Lighthouse 可以快速简单的测试H5 网页的性能测试报告。

Tips

您发布的文章将会展示至里程碑专区，您也可以在专区内查看其他创作者的纪念日文章
优质的纪念文章将会获得神秘打赏哦

H5性能测试以及H5性能测试工具相关推荐

软件测试性能测试结果,软件性能测试结果分析工具的研究与设计
摘要: 随着软件行业的发展,针对软件系统尤其是Web应用系统的性能测试技术已经成为了软件测试领域的热点.虽然许多测试工具对性能测试提供了自动化支持,但性能测试的执行过程仍具有极高的专业性和复杂度,这一 ...
Stress命令Linux性能测试，压力测试工具（Centos演示）
Stress命令Linux性能测试,压力测试工具 1.模拟一颗cpu打满 stress -c 2 (见如下图:使用htop或者top查看想打满几颗cpu就输入,对应数字即可) 2.模拟产生2个进程,每 ...
【性能、Jmeter】性能测试知识以及jmeter工具的基本使用方法
文章目录 1.性能测试基础 1.1.性能测试的概念 1.1.1.性能 1.1.2.性能测试 1.1.3.性能测试的目的 1.1.4.功能测试与性能测试 1.2.性能测试的策略 1.2.1.基准测试 1 ...
转：性能测试中的性能测试指标与用户体验分析
转自:http://www.ltesting.net/ceshi/ceshijishu/xncs/2012/0223/204182_2.html 性能测试中的性能测试指标与用户体验分析网络应用性能分 ...
软件性能测试方案模板,性能测试方案模板
<性能测试方案模板>由会员分享,可在线阅读,更多相关<性能测试方案模板(8页珍藏版)>请在人人文库网上搜索. 1.性能测试方案性能测试方案版本:版本:V1.1V1.1 文文 ...
前端请柬框架_如何用h5做邀请函 h5邀请函是什么意思
首先先告诉大家如何用在线工具制作h5邀请函,我们一般在企业做活动,新品发布时邀请大家来参加,或者是结婚的时候也可以制作邀请函. H5模板展示现在我来告诉大家如何用h5做邀请函: 如果你会开发代码的话 ...
如何设计软件性能测试方案,软件性能测试怎么做？有哪些步骤？
性能测试与普遍的功能测试目标不同,因此其测试流程与普通的测试流程也不相同,虽然性能测试也是遵循测试需求分析--测试计划制订--测试用例设计--测试执行--编写测试报告的基本过程,但在实现细节上,性能测 ...
【IT之路】性能测试系列 -- 初识性能测试
上一章节我们大概了解了下LoadRunner,这一章,我们来认识一下性能测试. 说到性能测试,很多同学会有自己不同的感想. web前端的测试同学说:页面怎么半天打不开啊,没办法测啊,必须改善. 一线运 ...
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
Jmeter_性能测试(一)：性能测试的概念，性能测试的流程和术语，性能测试脚本的制作和调试
Jmeter_性能测试(1):性能测试的概念性能测试的概念性能测试是指通过特定方式,对被测系统按照一定策略施加压力,获取系统响应时间.TPS(Transaction Per Second).吞吐 ...

H5性能测试以及H5性能测试工具

背景

总结

H5性能测试工具

H5性能测试以及H5性能测试工具相关推荐

最新文章

热门文章