关键词：
说起H5性能测试，可能许多同学有所耳闻，但是不知道该如何去做性能测试，或者不知道H5应该关注哪些性能指标。今天我们就来看下。希望阅读本文后，能够有所了解。
常用指标
1、H5性能相关参数介绍
白屏时间：用户首次看到网页又内容的时间，即第一次渲染流程完成时间
首屏时间：用户看到第一屏，即整个网页完全显示出来的时间
首资源下载时间：从开始下载第一个资源到下载完成的时间
总资源下载时间：从开始已下载到所有资源都下载完成的时间
用户可操作时间：从页面开始加载，到用户能够操作页面的时间
在APP客户端上测试测试H5性能时，还要关注因为加载H5时，APP的常规性能指标
内存：加载页面前后内存变化，可以反映出H5中资源数量和大小，比如图片大小
CPU：如果当前页面中样式过于复杂，可以观页面加载时的CPU占有率，如果CPU长期处于高占用率，需要考虑优化
FPS：在动画效果比较复杂 或者有视频的H5页面中，应该重点关注，防止严重的卡顿
2、H5性能测试点
影响H5性能有这几个因素：网络带宽、DNS解析、服务器处理能力等。以下是H5性能的测试点:
常用工具
目前开源的免费的工具很多了，可以根据自己的需要来选用。
1、WebPageTest
WebPageTest是一个免费开源的在线性能评测工具；其使用真正的浏览器(IE和Chrome等)与真实的消费者连接速度，可以从全球多个地点运行免费网站速度测试；并依据测试结果提供丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查和改进建议，会给每一项内容一个最终的评级。
打开官网地址：
在上图中2处输入要测试的URL网址。
在3处选择地址（Test Location）,WebPagetest具有位于世界各地的测试机器，你应该从接近用户访问的位置进行测试，下拉选择就好，可以选择安卓，iOS，PC端等设备，以及不同国家地等；
在4处选择使用什么浏览器进行测试。不同的位置支持不同的浏览器。
补充：点击Advanced Setting下拉可以进行高级设置，不过我们一般选择默认就好。
设置完成后，点击START TEST，开始测试;
2、Chrome DevTools
Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。
打开要测试的网页，F12 可以看到Network的选项，在该选项下可以看到相应的网络请求时间和类型，以及资源大小。
同理，也可以用Charels 等抓包工具来分析。
3、Page Speed
page speed 是google的一个浏览器插件，需要手动安装或者添加在谷歌浏览器，
打开需要测试的网站，按F12 后，可以看到PageSpeed 的选项。
点击START 开始分析，测试完成后会产出分析报告
4、Lighthouse
Lighthouse是一个开源的自动化工具，可将其作为一个 Chrome的插件运行，或者从命令行运行。
通过chrome的应用商店搜索Lighthouse下载安装后，打开需要测试的网页，按F12 ，可以看到LightHouse的选项，
打开后，点击Analyze page load 就开始分页页面性能，生成性能分析报告。
报告样式如下：
相关指标含义：
首次内容绘制（First Contentful Paint）：即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。
可交互时间（Time to Interactive）：指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。
速度指标（Speed Index）：衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。
最大内容绘制（Largest Contentful Paint）：表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
总的阻塞时间（Total Blocking Time）：表示此次分析过程中遇到的阻塞时间
关于H5性能的指标个工具就介绍这些，希望看了后对你能有所帮助~
绵薄之力
最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走
这些资料，对于想进阶【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。有需要的小伙伴可以下方进群领取！
h5性能优化
...试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相... 查看详情
h5前端性能测试快速入门
...试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相... 查看详情
回答性能测试面试题思路：你最近落地的一个性能测试案例？(代码片段)
之前面试高级测试工程师时，被问到性能测试这个问题，以下仅代表个人见解：我的思路是： 详细说明当时整个性能测试的落地全程，包括性能测试需求的获取、方案的设计、测试脚本的场景设计举... 查看详情
面试题：在日常工作中怎么做mysql性能测试及调优的？
前言：服务器性能测试工具原理性能测试工具的主要作用是通过模拟生产环境中的真实业务操作，对被测试系统实行压力负载测试，监视被测试系统在不同业务、不同压力性能下的性能表现，找出潜在的性能瓶颈... 查看详情
2023面试干货：性能测试篇
性能测试怎么做的？参考答案：做性能需求分析，挑选了用户使用最频繁的功能来做性能测试，比如：登陆，打开系统首页，搜索，提交订单，确定性能指标，比如：事务通过率为100%... 查看详情
性能测试如何做全链路压测？
...链路压测，首先要知道什么是全链路压测？如果面试时，当面试官问到你这个问题的时候，一定要搞明白全链路压测是线上生产压测，而不是在测试环境进行压测。至于原因也很简单，因为对于绝大部分公... 查看详情
记2019/03/05的一次面试(性能测试)
今天约了一个面试，是某保险的外包性能岗。我第一次接触外包，一个HR联系了我，然后我问了一下具体JD，回复是：【一年以上性能测试经验，熟悉LR应用，最好是男生】。 我之前主要做的是功能，还有部分接口。性能... 查看详情
如何做好h5性能优化？
...、传播之中。而针对H5效率慢、体验差的硬伤，如何做好性能测试并优化其性能就显得尤为重要。红豆Live是微博子公司有信旗下的一款语音直播产品，有各种H5页面。我们在做H5性能测试时进行了总结，本文将为大家详细介绍H5性... 查看详情
2019-2021：测试实用干货精选汇总
...试：jmeter中通过beanshell把关联转变成参数化03、如何面试性能测试04、性能测试常用术语解释05、性能测试案例：redis获取不到连接池，T 查看详情
面试记录留给自己做纪念(代码片段)
新浪：java/python1、安卓怎么测试、专项测试关注那些、2、app安全怎么测试3、jmeter怎么自定义协议，分布式怎么部署4、jvm原理、算法、垃圾算法有几种，怎么在tomcat中修改参数5、HashMap有几种遍历、java集合分几种，有什么不同6... 查看详情
我发现这些android知识点面试官真的是百问不厌！（已整理）(代码片段)
开头为了准备面试复习了Android的一些原理知识，并陆陆续续的总结了一些面试相关的东西，因为太久没写面试之类的博客了，今天就想做一个Android面试知识的分享。但是无奈本人太蔡了(灬ꈍꈍ灬)，在北京、深圳... 查看详情
软件测试面试--性能测试
1、如何理解强度测试？参考答案：强度测试是为了确定系统在最差工作环境的工作能力,也可能是用于验证在标准工作压力下的各种资源的最下限指标。它和压力测试的目标是不同的,压力测试是在标准工作环境下,不断增加系统... 查看详情
逐点分析，这样做web端性能测试更易上手
...件测试相关工具、安装包5、高级测试工程师简历模板6、面试题、模拟面试、PDF文档有需要的小伙伴们可以关注我的公众号：程序员二黑，免费领取文章目录1、什么是Web性能测试？注意事项有哪些？2、HTTP请求3、W 查看详情
接口测试面试题目
1、做接口测试当请求参数多时，tps下降明显，此接口根据参数从redis中湖区数据，每个参数与redis交互一次，当一组参数是tps5133，五组参数时tps1169，多次交互影响了处理性能，如何改进？tps就是每秒事务数，transactionpersecond。吞... 查看详情
面试题：如何编写一个杯子测试用例
如何测试一个杯子走火入魔系列之：水杯测试一.题目：给你一个水杯如何测试？要求你设计20个以上的testcase.1.功能测试主要基本功能测试，等价、边界、判定、因果1.1水杯是否可以装液体，能否装其他液体。比如酒精、甲醇1.2... 查看详情
面试测试总结
1、给你一个APP，你该如何进行测试？ （1）功能测试-----主要测试APP的流程和业务要求是否达标（手动和自动化结合测试） （2）性能测试------关注APP的性能参数：CPU、FPS、内存、耗电量、流量，同时关注APP的安装和启动... 查看详情
常见性能测试岗位面试题
一、基础篇 1、较为完整的性能测试的流程 一个完整的性能测试流程 2、性能测试的基础理论、常见术语 性能测试常见术语浅析 3、性能测试模型、类型 常见的性能测试类型、性能测试模型 4、HTTP... 查看详情
如何做性能测试
性能优化的常见概念 吞吐量（TPS,QPS）：简单来说就是每秒钟完成的事务数或者查询数。通常吞吐量大表明系统单位时间能处理的请求数越多，所以通常希望TPS越高越好 响应时间：即从请求发出去到收到系统返回的时间... 查看详情