一、性能测试的重要性
性能对产品造成什么影响?
性能对用户造成什么影响?看下图,它直接导致了用户的流失!
而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加载性能和这些数据都有关。
... ...
查看全文内容,请点击下载:http://www.51testing.com/html/00/n-3712900.html
版权声明:51Testing软件测试网及相关内容提供者拥有51testing.com内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。