【学习笔记】H5性能测试

1、H5指移动网页本身

H5是指用H5语言制作的一切数字产品。

H5提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化；

H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。

随着H5页面的普及和运用，深深影响着我们各个业务的发展，H5性能测试越来越受到重视。

2、浏览器渲染原理和过程

浏览器作为一个客服端，它的主要作用就是展示可访问的资源，不管这些资源是本地资源还是通过网络请求获取到的资源。

地址栏输入地址触发网络请求，获取到html文件。
HTML解析器解析HTML文件构建成为DOM树。
遇到CSS通过CSS解析器解析成为CSSOM。
遇到JS通过JS解析器解析。
DOM Tree和CSSOM构建呈现树(6、7两个步骤)。
呈现树根据结构样式确定节点的位置(布局或者回流) ----回流。
确定好位置以后，根据外观样式绘制 ----重绘。
通过UI后台和用户界面组件把内容显示到浏览器主窗口上。

3、H5性能参数

H5测试内容包括：功能测试、浏览器兼容测试、前端性能测试、服务端性能测试，这里主要介绍H5性能测试。

（1）H5性能测试点：

影响H5性能有以下几个要素：网络带宽、DNS解析、服务器处理能力、数据库操作等。以下是H5性能的测试点:

加载速度	网络	WIFI
		5G
		4G
		3G/2G
	启动	首字
	启动	首屏
	缓存	有缓存
	缓存	无缓存
	缩短响应时间	CDN部署
	缩短响应时间	合理分配域名
流量	http请求数	资源合并
	http状态	失败资源处理
	单个请求优化	缓存机制
	单个请求优化	压缩内容
	资源合理组合	预加载
		分页加载
		css放顶部
		js放底部
服务端压力	服务端压测	服务端性能
体验	提示信息	弱网络下加载提示
	提示信息	接口数据异常提示
	打开性能	打开或刷新页面是否抖动
	打开性能	应用回退后台后体验

（2）H5性能相关参数介绍：

以下简单介绍和H5性能相关的几个参数概念：

时间相关：

（1）白屏时间：用户首次看到网页有内容的时间，即第一次渲染流程完成时间。

（2）首屏时间：是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。

（3）首资源下载时间：从开始下载到第一个资源均下载完成的时间，不包括页面绘制时间。

（4）总资源下载时间：从开始下载到所有资源均下载完成的时间，不包括页面绘制时间。

（5）用户可操作时间：从页面开始加载到用户操作可响应的时间。

上述各种时间指标应根据当前H5的具体情况，选择合适的测试指标。

WebView相关：

在android和IOS上测试H5性能，测试人员还应该关注因加载H5而引起的app常规性能指标。

（1）内存：加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小；

（2）CPU：当页面中资源样式复杂，强调视觉效果时，测试员可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率，可考虑降低高计算量的视觉效果等手段；

（3）FPS：帧率尤其在有视频和动画效果的H5中，测试员应该重点关注，防止严重的卡顿流出。

性能要求可以参考下表：

项目	指标
内存	1.页面内反复切换tab，切换场景，滑动页面等场景不存在内存泄露，给出数据并说明结论； 2.运行过程中内存峰值<单个应用程序最大可能内存的60%；3.退出后内存恢复到进入游戏前的占用值；
电量	程序放后台或处于飞行模式的情况下耗电小于10mAh；
流量	无异常流量消耗；不存在资源的重复拉取；
弱网络	1.无crash；2.体验方面提示用户网络环境差；3.拉取失败能正常返回；
cpu	CPU 启动时cpu占比<20%；运行时cpu占比峰值<80%；
Crash	网络/网络状态发生变化时/连续8小时运行，无crash；
流畅度	avgFPS不小于40；inFPS大于0；

4、测试方法和工具

（1）抓包工具--Fiddler、Charles等

这类工具不仅可以抓包，还可以对包进行篡改，动态展示瀑布流，对web进行调试。

（2）平台型工具--Page Speed、PCAP Web Performance Analyzer、WebPagetest等

可以快捷的测试出H5前端性能中的数据、视图，并给出一定程度的优化建议。

工具	优点	缺点
PCAP Web Performance Analyzer	1 方便移动端H5测试，包直接来源于移动端货去PCAP文件； 2 各类资源数据统计一目了然； 3 瀑布流展示http请求过程；	1 操作麻烦，抓包和分析都需要人工操作； 2 属于离线分析，不实时； 3 没有具体的web展示；
Page Speed	1 直观展示测试结果，并给出优化建议； 2 可以测试移动端和PC端； 3 提供了网页速度和用户体验两类结果，包括字体清晰度，窗口大小等用户体验结果；	1 只有结果，没有详细的资源数据统计； 2 没有提供各个http的request和response的详细数据；
WebPagetest（推荐）	1 提供了首屏时间、首字节时间，全界面加载时间的工具，并提供对应时间点的截图； 2 提供了瀑布流视图和连接视图，清晰展示了并发请求的http连接以及请求资源； 3 提出优化建议checklist，详细标出各个资源是否可以优化，如压缩、缓存、发布CDN、设置GZIP等； 4 提供测试过程的视频演示；	1 并不是专门为移动端h5测试所设计的； 2 关注h5前端页面本身的性能，没有关注浏览器引起的内存、CPU、FPS等的变化；
Chrome DevTools（推荐）	1 支持移动端h5在PC端远程调试，能够对具体的移动设备进行测试； 2 集成了Page Speed； 3 提供Network面板，展示瀑布流视图，各类资源清晰展示，并提供了缩略图，方便查看图的大小尺寸，以及是否有缺失和冗余； 4 提供TimeLine面板，展示CPU、内存、FPS等性能数据；	1 录制分析的一种静态分析方法，不同于fiddler等抓包工具提供的实时抓包、修改等功能；

5、工具使用举例

（1）WebPageTest

WebPageTest是一个免费开源的在线性能评测工具；其使用真正的浏览器(IE和Chrome等)与真实的消费者连接速度，可以从全球多个地点运行免费网站速度测试；并依据测试结果提供丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查和改进建议，会给每一项内容一个最终的评级。

打开官网地址：https://www.webpagetest.org

开源地址 https://github.com/WPO-Foundation/webpagetest

在上图中2处输入要测试的URL网址。在3处选择地址（Test Location）,如下图，下拉选择就好，可以选择安卓，iOS，PC端等设备，以及不同国家地等；补充：点击Advanced Setting下拉可以进行高级设置，不过我们一般选择默认就好。设置完成后，点击START TEST，开始测试;

（2）Chrome DevTools

Chrome DevTools（Chrome 开发者工具）是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

手机端USB和PC连接，并打开开发者模式；

在浏览器地址栏输入chrome://inspect 或者 about:inspect 打开DevTools；

如下图所示；由于网络限制缺少性能分析的功能；

6、H5性能优化及原理

1）Http请求个数

有统计证明：一个网页最终到达终端用户有80%的时间都是在JS，CSS，图片，mp3，flash等资源的http请求。另一方面，http请求的数量也是有限制的，浏览器对同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是6个。

看来通过够控制http请求的数量，减少http请求时间，达到减少网页加载和呈现的时间，能带来更好的用户体验。

（2）组件是否压缩

通常来说，组件压缩是一种增加CPU压缩解压缩时间来减少网络传输消耗的办法，并且通常网络资源较cpu资源更紧张，所以对合适的对象设置压缩能个取得良好的收益。

压缩方法：在http请求中设置所接受到压缩方式，在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段。

压缩对象：从http请求返回资源中的html，js，CSS，xml等都可以设置压缩，值得注意的是我们不需要对图片音乐等资源设置压缩，因为这些资源本身已经压缩过了，再次压缩收益并不高，而且增加CPU负担。Js，CSS我们通常通过去掉空格和回车来压缩，再经过GZIP压缩，能达到良好的压缩效果。

（3）图片格式和大小是否合适

图片格式：显示效果较好的图片格式中，有webp、jpg和png24/32这几种常见的图片格式。一般来说，webp的图片最小，但在iOS或者android4.0以下的系统中可能会有兼容性问题需要解决。

图片尺寸：这获取图片尺寸时候应该考虑图片具体的展示场景，如当前移动设备中常用个尺寸规格为480×800、600×1024、720×1280，800×1280等，从原图来保证图片能够被呈现，而不是通过代码对图片放大或缩小。

图片压缩：对于jpg，png格式图片来说本身就已经经过了压缩，这对于稀缺的带宽资源是不够的，我们还需要更加优化的压缩算法，通过一系列的图片压缩工具如TinyPNG, Smush.it可以得到更好的压缩且图片质量不变。

（4）CSS放在顶部

在浏览器渲染过程中谈到，dom树构建完成后。CSS要放到html代码的开头的head标签结束前。如果网页是动态生成的，那么在head代码完成后可以页面输出，这样浏览器就会更快地解析出来head中的内容，开始下载CSS文件资源。而CSS放在底部则会引起重新绘制，用户侧感受到“闪屏”的不好体验。

（5）JS放在底部

JS在下载的时候会引起两个问题：阻止网页内容的展示并阻止其他资源下载。在“减少http数量”部分中，我们谈到各种资源的下载是并行的，根据不同域名不同浏览器内核并行数量有所不同，所以下载js时候，并行下载机制失效。并且在js中可能包括document.write等改变页面布局的操作，所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。

（6）使用CDN

CDN内容分发网络（Content Delivery Network）将源站内容发布到最接近用户的“边缘”节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题，提供一系列加速解决方案。所以，如果H5的用户分散在全国各地，建议尽可能的将资源放到CDN，如腾讯云CDN。

参考文章：https://mp.weixin.qq.com/s/drQcMJukTjozNRlpjtLPXw