H5前端性能测试快速入门
说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过本文后，能够知道：H5前端性能测试什么？如何发现问题以及相应的优化规则。
一、浏览器渲染引擎
浏览器是Html解析和页面最终展示的工具，所以测试H5前理解浏览器的工作原理是必不可少的，具体可参考《浏览器工作原理》。
浏览器的主要功能
浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。在浏览器组成部分中，渲染引擎是用户直接相关，呈现用户所需页面的部分。所以从渲染引擎入手，了解HTML解析与页面展示。
渲染引擎工作流
dom树构建vc3Ryb25nPqO6tNNodG1sserHqbXEveLO9r+qyryjrL2ruPfW1rHqx6m94s72zqpkb23K99bQtcS497j2vdq146OsserHqbrNZG9tyve1xNbQtcS92rXjysfSu9K7ttTTprnYz7WhozwvcD4NCjxwPjxzdHJvbmc+5NbIvsr3ubm9qKO6PC9zdHJvbmc+vatDU1O6zXN0eWxlserHqdbQtcTR+cq90MXPor3izvbOquTWyL7K96Os5NbIvsr308nSu9CpsPy6rNPQ0dXJq7rNtPPQobXIyvTQ1LXEvtjQztfps8mjrMv8w8e9q7G7sLTV1dX9yLe1xMuz0PLP1Mq+tb3GwcS7yc+hozwvcD4NCjxwPjxzdHJvbmc+5NbIvsr3sry+1rrNu+bWxqO6PC9zdHJvbmc+5NbIvsr3yLe2qLj3uPZkb2292rXj1NrGwcS71tC1pci3x9DOu9bDo6y4+b7d5NbIvsr31tC1xNHVyau1yNDFz6K75tbGs/bN+NKzoaM8L3A+DQo8cD48aW1nIGFsdD0="" src="/uploadfile/Collfiles/81.png" title="\" />
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
二、测试关注指标
Http相关：
1、Http请求个数
有统计证明：一个网页最终到达终端用户有80%的时间都是在js，，图片，mp3，flash等资源的http请求。另一方面，http请求的数量也是有限制的，浏览器对同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是6个。
看来通过够控制http请求的数量，减少http请求时间，达到减少网页加载和呈现的时间，能带来更好的用户体验。
优化方案：
雪碧图：即CSS Sprite，也称CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
如图有16个icon，每一次取图片都需要一个http请求，如果通过CSS雪碧图将16个资源合并，再通过background-image和backgorund-position定位出雪碧图中的小区域，那么只需要一个http请求就可以获得全部图片。
图片地图：是一种小图合并大图的方式，和雪碧图相似，区别仅在实现原理上有不同，雪碧图是通过CSS的方式来呈现图片的某个局部，而图片地图是从html代码的方式来控制显示区域。
js CSS 合并：将多个小的js、CSS合并成一个大的js、CSS文件，间接达到减少http请求的目的。
2、组件是否压缩
压缩方法：在http请求中设置所接受到压缩方式，在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段。 压缩对象：从http请求返回资源中的html，js，CSS，xml等都可以设置压缩，值得注意的是我们不需要对图片音乐等资源设置压缩，因为这些资源本身已经压缩过了，再次压缩收益并不高，而且增加CPU负担。Js，CSS我们通常通过去掉空格和回车来压缩，再经过GZIP压缩，能达到良好的压缩效果。
通常来说，组件压缩是一种增加CPU压缩解压缩时间来减少网络传输消耗的办法，并且通常网络资源较cpu资源更紧张，所以对合适的对象设置压缩能个取得良好的收益。
　3、图片格式和大小是否合适
图片格式：显示效果较好的图片格式中，有webp、jpg和png24/32这几种常见的图片格式。一般来说，webp的图片最小，但在iOS或者android4.0以下的中可能会有兼容性问题需要解决。
图片尺寸：这获取图片尺寸时候应该考虑图片具体的展示场景，如当前移动设备中常用个尺寸规格为480&800、600&80，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、JS &CSS压缩
首先举一个例子，相信大家在使用jquery时注意到有两个文件jquery-1.4.2.js和 jquery-1.4.2.min.js，这里的min.js就是js方式的压缩结果。具体压缩方法如下：
第一步：&精简&，去掉js文件中的而空格和换行符和注释等信息，使得js代码变得紧凑而不失其语义。如：
第二步：&混淆&，将方法名和变量名用更简短的方式来表达，如变量可以用一个字符来表示。如：
优点：从js&CSS文件的源头进行压缩，缩小了http传输过程数据大小。
缺点：通过两步压缩后，再来阅读js&CSS源码是非常苦难的。并且经过压缩的代码可能和另一个压缩的代码因变量被共用而引起语法错误。
最后，经过压缩过的脚本文件使用务器端设置GZIP压缩算来压缩，能够压使文件缩得更加的淋漓尽致。
7、是否添加缓存
为一种减少http请求的方式，如下有两种方式设置缓存，测试时注意常用资源是否请求资源时否设置缓存：
Cache-Control
&no-cache&指示请求或响应消息不能缓存（HTTP/1.0用Pragma的no-cache替换）
&no-store&用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。根据缓存超时
Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。
设置方式：通过HTTP的META设置expires和cache-control
8、避免非200返回值
每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成，如：
1xx：请求收到，这些状态代码表示临时的响应。
2xx：操作成功，这类状态代码表明服务器成功地接受了客户端请求。
3xx：重定向，客户端浏览器必须采取更多操作来实现请求。
4xx：客户端错误，发生错误，客户端似乎有问题。
5xx：服务器错误，服务器由于遇到错误而不能完成该请求。
所以，如果有http请求返回为非200的状态码，我们认为这一次请求时无意义的，占用了稀缺的网络资源，所应该避免非200的返回状态码。
9、使用CDN
CDN内容分发网络（Content Delivery Network）将源站内容发布到最接近用户的&边缘&节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题，提供一系列加速解决方案。所以，如果H5的用户分散在全国各地，建议尽可能的将资源放到CDN，如腾讯云CDN。
时间相关：
白屏时间：用户首次看到网页有内容的时间，即第一次渲染流程完成时间。
首屏时间：是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。
首资源下载时间：从开始下载到第一个资源均下载完成的时间，不包括页面绘制时间。
总资源下载时间：从开始下载到所有资源均下载完成的时间，不包括页面绘制时间。
用户可操作时间：从页面开始加载到用户操作可响应的时间。
上述各种时间指标应根据当前H5的具体情况，选择合适的测试指标。
WebView相关：
在android和上测试H5性能，测试员还应该关注因加载H5而引起的app常规性能指标。
内存：加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小。
CPU：当页面中资源样式复杂，强调视觉效果时，测试员可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率，可考虑降低高计算量的视觉效果等手段。
FPS：帧率尤其在有视频和动画效果的H5中，测试员应该重点关注，防止严重的卡顿流出。
三、常用工具
工欲善其事，必先利其器，在做H5前端性能测试之前，选择合适的工具能让我们的测试工作事半功倍。本文要提到的工具有两类：
一类是抓包工具，如Fiddler、Charles等。这类工具不仅可以抓包，还可以对包进行修改，动态展示瀑布流，对web进行调试。在我们做H5前端性能测试的时候，个人觉得只要不修改包，不对H5调试，就可以放弃使用这类工具，不是工具不好，而是大材小用。
还有一类，这里重点提到的是如Page Speed、PCAP Web Performance Analyzer、WebPagetest这类平台型工具。我们可以快捷的测试出H5前端性能中数据，视图，并给出一定程度的优化建议。
（*以上为个人见解，如有疏漏和错误，请及时指正）
以手机管家端午节运营活动H5为例，附上上述工具测试结果页，当然这里仅仅是结果的罗列。具体的分析还是需要测试人员来做，衡量是否符合当前运营需求。
WebPagetest
Page Speed：
PCAP Web Performance Analyzer：
Chrome DevTools：
常见问题举例：
同样以手机管家端午节运营活动H5为例：（完成整个加载性能测试耗时只需20分钟左右）
1、HTTP请求过多
图为PCAP Web Performance Analyzer解析pcap包的结果，图中我们可以看出，21个http请求中，有7个是统计点发出的请求。这里可以考虑统计点合并上报和首屏时减少上报统计点。
2、图片空白部分太多
这里需要用到的图片仅仅是作为右上角分享，但是在我们请求的图片确实整张完整的图。
可以考虑请求小的切图，通过CSS控制图片显示位置。
3、图片尺寸
下面一张背景图，我们可以看到尺寸是，然后当前市面上Android主流机型主要为 480x800, 480x854, 540x960, 720x80 。所以，为每一个移动设备都提供一张的图片实在没有必要。
4、没有使用的资源
下面这一幅图，在chrome DevTools中看到请求响应并下载成功，但是在实际的H5活动中并没有使用过。
5、返回码非200
非200的返回码意味着本次请求没有实质性的收获，如上图所示的两次非200请求返回值：
404：上图请求图片时出现404：一方面，可能图片本身在H5中就不展示，所以这里直接去掉多余的连接就好了。另一方面，可能H5中需要该图片，而恰好访问结果为404，那此时就定位了一个bug 的存在。
302：请求音乐时出现302重定向：从图中可以明显看出两次请求后才获取到背景音乐，从用户侧可能会感知是音乐加载速度慢。
6、未使用CDN，未设置cache
如果该运营活动是全国性的，且用户量很大，那么非常有可能网络&边缘&的用户没有办法正常访问该H5活动。
7、资源未压缩
这里详细列出了各个没有压缩的图片资源。这里要建议的图片的压缩，如上图测试结果，压缩后可以减少16K的图片资源大小。还可以考虑是否采用图片地图来减少http请求。十多年前你跟我说打游戏能上亚运会，估计要被爸妈揍懵。
苹果很重视 AI（人工智能），这是它已经公之于众的事实。然而除了 Siri 之外，我们一...
网络直播+校园生活？抱歉，相比起远距离的牵挂，我们想到的却是另一个《楚门的世界》...
Apple Music扩张的很积极啊。
你了解吹牛老爹吗？你想看吗？
这次调整价格对你会有影响吗？
极尽奢华之能事，算是见识到了。
抢到了的朋友赶紧晒单呀……
现在随着交通越发的发达便利，全球化的步伐加快，出国旅游成为了大家享受生活，认识世...
在本周，一款以地堡为背景的恐怖游戏《地堡（The Bunker）》在苹果商店当中正式上架了...
【眼见你陷泥沼 眼见你欲重生 爱恨两难：《仙剑奇侠传幻璃镜》】在 1～2 个小时的试玩...
在上周的照例更新当中，国内手游大厂龙图在成功取得了 LINE 的正版授权之后，成功地将...
在游戏中，玩家需要带领各个西甲俱乐部的球员一同前进不断晋级，将诸多实力强劲的对手...
记得在2000年，游戏公司 Dusenberry Martin Racing 就曾经推出过相关赛事的游戏《热力...
在上周的 App Store 更新当中，心动互娱上架了一款名为《元气偶像季》的新作，本作以...
用户只需要将 iPhone 从 M4 的侧边插进去，就能让 iPhone 看起来像一台迷你 Mac。
日前，外媒 Wareable 为我们推荐了数款最值得考虑的支持苹果 HomeKit 平台的智能家居...
Apple Pencil的收纳问题，这款保护壳能够提供不错的解决方案。
想要带 iPhone 去潜水，还是加个防水保护壳比较靠谱~
虽然 AirPods 便携，但是充电盒可一点也不便携，好在 PodClip 能够解决这个问题。
AirPods 无线耳机是一款非常棒的产品，但是有一个问题是，如果这款产品掉到一些你捡不...
安装适配应用之后，就能直接插入iPhone手机，拷照片、音乐、文章、高清视频了。
Woodsaka Uniq 保护壳是专门针对 iPhone 设计的，它采用木质制成，并且全手工打造。
一个微软做的html5测试网页!!!测试一下浏览器性能呗
注册时间 最后登录
在线时间140 小时 UID
主题帖子人气
白苹果, 积分 500, 距离下一级还需 1000 积分
本帖最后由 philobscur 于
22:03 编辑
目前只测了safari8 和chrome
估计是因为测试版吧safari被完爆有点不敢相信
小心手烫!!
(117.28 KB, 下载次数: 8)
21:47 上传
(129.75 KB, 下载次数: 4)
21:47 上传
<p id="rate_68663" onmouseover="showTip(this)" tip="&a
href=&forum.php?mod=redirect&goto=findpost&ptid=8143860&pid=&fromuid=1&&&span &ME294，Safari的Fps为29，Cpu63度，GPU85度。&/span&&/a&&人气 + 1
" class="mtn mbn">
<p id="rate_28382" onmouseover="showTip(this)" tip="MBA MD760B，QQ浏览器FPS54左右&人气 + 7
" class="mtn mbn">
<p id="rate_33140" onmouseover="showTip(this)" tip="&a
href=&forum.php?mod=redirect&goto=findpost&ptid=8143860&pid=&fromuid=1&&&span &威锋有你更精彩：）&/span&&/a&&人气 + 3
" class="mtn mbn">
<p id="rate_737" onmouseover="showTip(this)" tip="&a
href=&forum.php?mod=redirect&goto=findpost&ptid=8143860&pid=&fromuid=1&&&span &遨游54，Safari 12&/span&&/a&&人气 + 1
" class="mtn mbn">
<p id="rate_4306" onmouseover="showTip(this)" tip="&a
href=&forum.php?mod=redirect&goto=findpost&ptid=8143860&pid=&fromuid=1&&&span &我靠，真烫&/span&&/a&&人气 + 1
" class="mtn mbn">
<p id="rate_35083" onmouseover="showTip(this)" tip="me 294 谷歌浏览器59帧 safari 25&人气 + 1
" class="mtn mbn">
MBA MD760B，QQ浏览器FPS54左右
me 294 谷歌浏览器59帧 safari 25
注册时间 最后登录
在线时间140 小时 UID
主题帖子人气
注册时间 最后登录
在线时间929 小时 UID
主题帖子人气
水静流深 厚积而薄发
不错 我也试试
注册时间 最后登录
在线时间140 小时 UID
主题帖子人气
不错 我也试试
小心cpu...一下子温度就上了
注册时间 最后登录
在线时间50 小时 UID
主题帖子人气
提示: 作者被禁止或删除 内容自动屏蔽
注册时间 最后登录
在线时间140 小时 UID
主题帖子人气
地址呢？、
啊哈忘记了已放出
注册时间 最后登录
在线时间1290 小时 UID
主题帖子人气
对philobscur于 21:47:48在楼主发表的内容评分：人气:+1;
本帖最后由 philobscur 于
22:03 编辑
目前只测了safari8 和chrome
估计是因为测试版吧safari被完爆有点不敢相信
地址: http://ie.microsoft.……me 294 谷歌浏览器59帧 safari 25
注册时间 最后登录
在线时间135 小时 UID
主题帖子人气
?? déjà??Rovu??? déjà??Rovu?
GALACTIC SCORE 485.21 km/s，分数是指的这个吗？
注册时间 最后登录
在线时间50 小时 UID
主题帖子人气
提示: 作者被禁止或删除 内容自动屏蔽
注册时间 最后登录
在线时间135 小时 UID
主题帖子人气
?? déjà??Rovu??? déjà??Rovu?
22.19.41.png (300.5 KB, 下载次数: 0)
22:21 上传
温度瞬间上80，好夸张。
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!