H5前端性能测试快速入门
前言
说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5前端性能测试什么?如何发现问题以及相应的优化规则。
一、浏览器渲染引擎
浏览器是Html解析和页面最终展示的工具,所以测试H5前理解浏览器的工作原理是必不可少的,具体可参考《浏览器工作原理》。
浏览器的主要功能
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。在浏览器组成部分中,渲染引擎是用户直接相关,呈现用户所需页面的部分。所以从渲染引擎入手,了解HTML解析与页面展示。
渲染引擎工作流
- dom树构建:从html标签的解析开始,将各种标签解析为dom树中的各个节点,标签和dom树的中的节点是一一对应关系。
- 渲染树构建:将CSS和style标签中的样式信息解析为渲染树,渲染树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。
- 渲染树布局和绘制:渲染树确定各个dom节点在屏幕中单确切位置,根据渲染树中的颜色等信息绘制出网页。
值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
二、测试关注指标
Http相关:
1、Http请求个数
有统计证明:一个网页最终到达终端用户有80%的时间都是在js,CSS,图片,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×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、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<meta http-equiv=”Cache-Control” content=”max-age=7200″ /><meta http-equiv=”Expires” content=”Mon, 20 Jul 2016 23:00:00 GMT” />
8、避免非200返回值
每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成,如:
1xx:请求收到,这些状态代码表示临时的响应。
2xx:操作成功,这类状态代码表明服务器成功地接受了客户端请求。
3xx:重定向,客户端浏览器必须采取更多操作来实现请求。
4xx:客户端错误,发生错误,客户端似乎有问题。
5xx:服务器错误,服务器由于遇到错误而不能完成该请求。
所以,如果有http请求返回为非200的状态码,我们认为这一次请求时无意义的,占用了稀缺的网络资源,所应该避免非200的返回状态码。
9、使用CDN
CDN内容分发网络(Content Delivery Network)将源站内容发布到最接近用户的“边缘”节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题,提供一系列加速解决方案。所以,如果H5的用户分散在全国各地,建议尽可能的将资源放到CDN,如腾讯云CDN。
时间相关:
- 白屏时间:用户首次看到网页有内容的时间,即第一次渲染流程完成时间。
- 首屏时间:是指用户看到第一屏,即整个网页顶部大小为当前窗口的区域,显示完整的时间。
- 首资源下载时间:从开始下载到第一个资源均下载完成的时间,不包括页面绘制时间。
- 总资源下载时间:从开始下载到所有资源均下载完成的时间,不包括页面绘制时间。
- 用户可操作时间:从页面开始加载到用户操作可响应的时间。
上述各种时间指标应根据当前H5的具体情况,选择合适的测试指标
WebView相关:
在android和IOS上测试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、图片尺寸
下面一张背景图,我们可以看到尺寸是1080X1919,然后当前市面上Android主流机型主要为 480×800, 480×854, 540×960, 720×1280, 800×1280 。所以,为每一个移动设备都提供一张1080X1919的图片实在没有必要。
4、没有使用的资源
下面这一幅图,在chrome DevTools中看到请求响应并下载成功,但是在实际的H5活动中并没有使用过。
5、返回码非200
非200的返回码意味着本次请求没有实质性的收获,如上图所示的两次非200请求返回值:
404:上图请求图片时出现404:一方面,可能图片本身在H5中就不展示,所以这里直接去掉多余的连接就好了。另一方面,可能H5中需要该图片,而恰好访问结果为404,那此时就定位了一个bug 的存在。
302:请求音乐时出现302重定向:从图中可以明显看出两次请求后才获取到背景音乐,从用户侧可能会感知是音乐加载速度慢。
6、未使用CDN,未设置cache
如果该运营活动是全国性的,且用户量很大,那么非常有可能网络“边缘”的用户没有办法正常访问该H5活动。
7、资源未压缩
这里详细列出了各个没有压缩的图片资源。这里要建议的图片的压缩,如上图测试结果,压缩后可以减少16K的图片资源大小。还可以考虑是否采用图片地图来减少http请求。
原文地址:http://tmq.qq.com/2016/07/h5-xingneng-test/
H5前端性能测试快速入门的更多相关文章
- [原创]H5前端性能测试工具介绍
[原创H5前端性能测试工具介绍 一 网络抓包工具 网络抓包工具选择原则,可以捕获网络请求,抓取具体请求信息流,同时可以针对网络请包进行修改或拦截: 1.Fiddler(推荐) 2.Charles(推荐 ...
- Bootstrap前端框架快速入门专题
1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...
- web前端html快速入门
HTML 学前端之间不得不知道一个网站:http://www.w3school.com.cn/ 网上有很多教程关于前端的,写的特别详细,也写的特别好.我们应该要自已理解,一些相应的前端的知识,不能只是 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 前端必学内容:webpack3快速入门 1-23节内容参考
前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...
- 前端性能测试(H5性能测试)
前端性能调优方法同样适用于H5. 1.H5前端性能知识点 学习前端性能,必须对HTTP协议有所了解. 1.1 浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具. 浏览器的主要功能:将用户选择的 ...
- 前端学习 node 快速入门 系列 —— 初步认识 node
其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...
- 前端学习 node 快速入门 系列 —— npm
其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...
- 前端学习 node 快速入门 系列 —— 模块(module)
其他章节请看: 前端学习 node 快速入门 系列 模块(module) 模块的导入 核心模块 在 初步认识 node 这篇文章中,我们在读文件的例子中用到了 require('fs'),在写最简单的 ...
随机推荐
- Managing IIS Log File Storage
Managing IIS Log File Storage You can manage the amount of server disk space that Internet Informa ...
- AJAX原生JS代码
var http_request = false;function send_request(method,url,content,responseType,callback){ http_reque ...
- block的初识
block的介绍: Block是iOS4.0之后新增的一种语法结构,也称为“闭包(closure)”. SDK4.0新增的API大量使用了Block. Block是一个匿名的函数代码块,此代码 ...
- s5pv210中断体系
一.什么是中断? 1.中断的发明是用来解决宏观上的并行需要的.宏观就是从整体上来看,并行就是多件事情都完成了. 2.微观上的并行,就是指的真正的并行,就是精确到每一秒甚至每一刻,多个事情都是在同时进行 ...
- centos7安装openoffice
[摘要:间接登录openoffice民网下载硬件包,但跳转的页里却不停挨没有开.末了只能正在末端里干活下了: 1. 挑选得当的版本:http://www.openoffice.org/download ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 售价249英镑 我曾经花了 ...
- C++设计模式-策略模式(2)
策略模式:策略模式针对一组算法,将每一个算法封装到具有共同接口的独立的类中从而使得它们可以相互替换. 策略模式使得算法可以在不影响到客户端的情况下发生变化.策略模把行为和环境分开.环境类负责维持和查询 ...
- 你不知道的函数节流,提高你的JS性能!
浏览器的DOM计算处理非常耗费CPU时间,霸占内存,这对我们的开发来说是非常不友好的,,比如IE浏览器的onresize事件就可能在用户稍微拖动一下窗口时计算上千次,甚至更高频率直接让浏览器崩溃... ...
- 解决跑twoBitToFa时出现“/admin/exe/linux.x86_64/twoBitToFa: Permission denied”的问题
出现这种问题时,一般要加上以下命令: chmod ugo+x ./admin/exe/linux.x86_64/twoBitToFa 运行成功后,再将twobit格式转化为fa格式 ./admin/e ...
- iOS 9/10强制使用https访问网络,使用了第三方SDK的应用需要配置的信息
2017年01月01日起苹果将全面禁止使用http来访问网络. 网上扒了一些资源,解决方法还是有的,但是都不确定是否可以通过审核,毕竟实践才是检验真理的唯一标准. 后续如果上线成功,再来分享. 如果应 ...