一、性能测试的重要性
性能对产品造成什么影响？
性能对用户造成什么影响？看下图，它直接导致了用户的流失！
而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内容的全部版权，未经明确的书面许可，任何人或单位不得对本网站内容复制、转载或进行镜像，否则将追究法律责任。
