首页新闻中心 →   技术交流

无线测试之H5测试方法(二):性能测试

来源:睿世达   |   发布时间:2016-11-22 13:41:37

一、性能测试的重要性

  性能对产品造成什么影响?

  性能对用户造成什么影响?看下图,它直接导致了用户的流失!

  而H5的性能体验原先就不及native,H5的性能测试不管是从商业角度上,还是从产品本身体验上看,都非常重要。

  二、性能测试工具

  1)Chrome DevTools(推荐)

  i.支持移动端H5在PC远程调试;

  ii.集成了PageSeed;

  iii.提供network面板,展示瀑布流视图,各类资源清晰罗列,还提供缩略图,方便查看图片大小尺寸和冗余或缺失;

  ix.提供timeline面板,展示CPU、内存、FPS等性能数据

  同类型的还有fiddler、charles,下文就以Chrome DevTools为例来说。

  2)WebPageTest

  i.提供首屏时间、首字节时间、全界面加载时间的工具,并提供对应时间点的截图

  ii.不仅提供瀑布流视图,还提供连接视图,清晰展示了并发请求的http连接以及请求资源;

  iii.提供优化建议checklist,详细标出各个资源是否可优化:如压缩、缓存、发布cdn、设置GZip等;

  ix.提供测试过程中的视频演示

  但是,他不是专门为移动端H5测试的,没有关注浏览器引起的内存、CPU变化、FPS等。

  3)可以跑分的网站性能工具YSlow

  4)阿里云测平台,见下图为测试概况

  三、性能测试点

  接下来,我们分别从加载性能、渲染性能、crash角度来做系统的性能测试。下文中,我们规定:

  • 表示测试校验点

  • 表示性能优化点

  3.1、加载性能

  用chrome自带的开发者工具-》network来查看下整体的性能数据,见下图

  图中最下面的性能数据包括有请求数、请求资源总量,完全加载时间、onDOMContentLoaded时间,load时间。

  PS:当html及script资源就位就会触发onDOMContentLoaded事件;

  Load事件则包括了外部script,图片,iframe标签触发,并嵌套内容下载完毕等(异步资源不包括在这个范围内);

  Finish表示首屏完全加载所需时间。

  再观察,资源类型包括有:XHR、js、css、img、media、font、Doc……

  我们的H5加载性能和这些数据都有关。

3.1.1、总体性能指标

  • 2G/3G下,首屏不超过200k,二次加载不超过50k

  • WIFI下,首屏不超过300k,二次加载不超过50k

  • 首屏js请求<5个,css请求<5个

  • 页面完全加载时间<2s

  • 单个请求资源<50k,响应时间<2s

  • 避免30*/40*/50*的http status

  (正常的请求:200,200(fromcache)为图片缓存未超过缓存超时时间直接取本地缓存,304not modified为未发生变化的响应)

.......

QQ

1973313421

wx QQ
phone

0755-26497690

top 返回顶部