H5游戏性能测试工具 选择与实践总结

概要

本文会对本人在使用白鹭做h5游戏进行性能测试的过程送使用的工具做一些简单记录。
包括 内存，cpu,耗电，启动时间，网络监控，弱网络，流量几个方面介绍。

背景

玩吧提测有一个性能需要求列表。需要每项指标达到要求。
测试性能基于公司项目的游戏，使用游戏引擎是egret,在android端是使用的webview加载游戏链接来展示游戏的方式。

---

性能要求列表

项目	指标
内存	1.游戏内反复切换tab，切换场景，滑动页面等场景不存在内存泄露，给出数据并说明结论； 2.运行过程中内存峰值<单个应用程序最大可能内存的60%；3.退出游戏后内存恢复到进入游戏前的占用值；
电量	程序放后台或处于飞行模式的情况下耗电小于10mAh；
流量	无异常流量消耗；不存在资源的重复拉取；
弱网络	1.无crash；2.体验方面提示用户网络环境差；3.拉取失败能正常返回；
cpu	CPU 启动时cpu占比<20%；运行时cpu占比峰值<80%；
Crash	网络/网络状态发生变化时/连续8小时运行，无crash；
流畅度	avgFPS不小于40；inFPS大于0；
打开速度	(从空间“正在进入游戏”页面消失开始算，到用户看到游戏界面为止）分ios/andriod 社交类游戏（指消除类、益智类等小游戏）首次启动时间，分wifi/3G/2G网络，wifi和3G下小于2秒，2G下小于8秒非首次启动时间，分wifi/3G/2G网络，wifi和3G下小于1.5秒，2G下小于6秒；中度重度游戏（指卡牌、RPG等题材类游戏）首次启动时间，分wifi/3G/2G网络，wifi和3G下小于3秒，2G下小于10秒非首次启动时间，分wifi/3G/2G网络，wifi和3G下小于2秒，2G下小于7秒

需要检查项

1. 内存
2. cpu占用
3. 耗电监控
4. 启动耗时监控
5. 网络
6. 流量监控

---

内存

方法一：TBs hybrid h5调试

手机qq,空间，微信，打开 http://debugx5.qq.com , 点“信息”，”是否打开TBS内核inspector 调试功能”，
android手机usb连电脑，chrome ，chrome://inspect/#devices.
手机上打开h5界面，，在chrome里找到对应的手机的webview,点inspect开始调试。
(可以通过timeline来查看和保存，也可以通过profile中，heap snapshot的方式截取对比内存查看是否内存泄露,也可以进行data的dump )
(可分析js函数内存使用) (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=zh-cn)

Summary 视图可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用）。此视图特别适用于跟踪 DOM 泄漏。
Comparison 视图可以显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数让您可以确认是否存在内存泄漏及其原因。
Containment 视图允许您探索堆内容。此视图提供了一种更好的对象结构视图，有助于分析全局命名空间 (window) 中引用的对象以找出是什么让它们始终如影随形。使用此视图可以分析闭包以及在较低级别深入了解您的对象。
Dominators 视图可以显示支配树，并且对于查找聚集点非常有用。此视图有助于确认对对象的意外引用已消失，以及删除/垃圾回收正在运行。

感受:
优点是因为腾讯的浏览器是基于chrome内核的优化，所以可以进行远程debug调试，可以记录一段时间内内存，使用情况，calltree, js函数的耗时等等..
缺点是因为游戏是在qq或者玩吧中的，screenshot没法截到游戏中屏幕，而且调试如果是record记录某一段时间内操作的情况，会比较卡，并不能记录fps情况.

方法二：android studio

通过android studio run app ,
Mat是在eclipse上也有，类似的profiler ,也有cpu内存占用百分比，也可以实时显示手机屏幕上的截图，但是感觉更适用与专门的android原生应用，
Mat android studio 里是android studio monitor
而我们游戏是用的webview上加载游戏的方式，没法看到一些js函数调用的情况

感受:
优点是, 然后在下面的android profiler中可以看到real-time图表，可以通过鼠标滑动找到某一帧的内存cpu,network情况
缺点是，不能截取某段时间的数据，并且导出,android device monitor 中的东西分析android原生应用还挺有用的，web view里加载个东西的似乎看不出啥来

方法三：Dumpsys

可以查看手机上所有进程内存占用大小的工具,
eg:
adb shell dumpsys meminfo 取所有的占用内存大小
adb shell dumpsys meminfo pakagename or Pid ( com.jidiangame.sanguo) com.tencent.mobileqq）看详细的内存
adb shell getprop|grep heapgrowthlimit 查看最大内存限制
可以配合watch 来查看， watch -n 5 dumpsys meminfo com.jidiangame.sanguo

我测试时候使用的测试机器是vivox9s , 内存大小[dalvik.vm.heapgrowthlimit]: [256m]

有一条是游戏占用查看最大堆内存的60%,我用adb shell getprop|grep heapgrowthlimit 来查看最大内存大小，结合刚才的应用内存大小来比较
从一本书上看到最大内存的解释，在虚拟机中，android系统给heap 堆内存设置了一个最大值，
App不可能完全使用1g,2g的内存，系统会分给一小部分，一个重要原因是android默认没有虚拟内存
为了保证极端情况下，前台app和系统还能稳定运行，就只能靠low memory killer 机制
App消耗内存过大导致的在手机剩余内存低于内存警戒线的时候，就会用low memeory killer ,
App占用内存越多，被处理掉的机会就越大
Low memory killer 是 out of memory 机制的优化

扩展阅读: 什么是dumpsys？

Dumpsys 是android上提供信息的系统服务，
通过adb 在命令行下获得所连设备的诊断输出，会输出很多，可以用选项过滤出想要的，包括ram , battery ,network

dumpsys官方介绍

---

cpu占用

方法一：android studio

用android studio 的android profiler 直观看cpu占用百分比

自己在使用的时候没有办法导出数据。所以没有使用.

方法二：dumpsys

adb shell dumpsys cpuinfo 获取cpu占比

我就是用这个记录的

方法三：chrome profiler

使用chrome profiler 从timeline中查看cpu占用情况
Cpu占用似乎只能看到大概，没有具体数值，可以看到具体什么函数，或者网络请求消耗的时间

扩展阅读: Emmagee

可以检测cpu , memory ,network ，battery ,如果root还可以看到堆大小，还有自定义收集数据的时间间隔



感受:
过程大概是，在手机中安装apk,然后选择想要测试的app,然后点开始，跳转到程序，然后结束时候，切回应用，点结束。会在本目录底下生成一个数据文件，然后excel查看就行了。
Emmagee 的github

---

耗电监控

方法一：developer tools for battery usage

Android 5.0提供的工具: adb shell dumpsys batterystats
1.手机连接pc,pc上执行 adb shell dumpsys batterystats —reset ,清空记录
2.断开手机与pc连接，进行需要检测的步骤
3.重新连接手机和pc, 执行adb shell dumpsys batterystats —charged
4.找到Estimated power use (mAh): 可以粗略的查看应用耗电


从下面根据包名找到对应应用的uid是多少，再从上面去找对应的耗时.
感受:
并不是很精确，手动插拔会有一些误差。

方法二：Battery Historian

(用到了上面的命令，有数据分析和可视化的图表，流程稍多点，没搞)
有兴趣可以看看
Google提供的一个工具,在github上，使用了android 的那个命令，有数据分析和可视化的图表

---

启动耗时监控

方法一：

根据需求，应该肉体测试就可以测出来了…用眼看。。卡个秒表啥的。。。

方法二：chrome profiler

直接load游戏链接，没通过玩吧,因为在qq内启动游戏之前没法inspect去做record操作，只有点连接才会有一个webview
使用chrome 测试
1.获取h5入口url,
2.手机chrome打开空白标签
3.pc上打开chrome, chrome://inspect , 找到对应的手机和空白标签，点inspect,进入dev tools
4.找到timeline(新的是performance),点record按钮，同时手机里加载url.
5.等游戏出来了就可以点record关闭记录。
6.查看记录，summary中可以看到loading的时间，也就是加载html的时间。event log中也可以看到loading的。

---

网络

工具

1：Fiddler

(windows上的一个工具,mac上没有,我用的mac所以没研究。公司有测试同学入行前是经过某培训的。。。据说是都教过)

2：Whistle

基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

Whistle的github

3：Wireshark

Wireshark是一个免费开源的分析工具，用于网路的问题定位，分析，通信协议开发。
是个跨平台的，最新版使用qt实现。用pcap抓包，有各种平台的，还有终端版

Wireshark的可以看看

4：弱网络测试(Augmented Traffic Control (ATC))

在检查项目中，包括平常测试，都需要进行弱网络的测试，这个ATC就可以模拟弱网络，提供测试.它是facebook的一个开源项目
Atc 是模拟网路环境的工具，可以控制设备的网络连接，可以变换网络状况来测试app,
可以模拟带宽，延时，丢包，坏包，包的顺序)
并没有mac和windows版本，只有Linux版本
github地址

我这里就贴一段我自己配置过程中的顺序吧，这个有人专门有单独的博客写更加具体的顺序，我再这里写下来简单的顺序，方便自己以后看下。

ATC使用和配置方法:
###(1)配置:
必须是linux系统，mac和windows都不行，
在linux，电脑连着网线，然后配置一个wifi，链接上，使得android手机可以连这个网络，
   linux上安装python2.7和Django1.10,
   安装 ATC
pip install atc_thrift atcd django-atc-api django-atc-demo-ui django-atc-profile-storage

创建Django 项目
django-admin startproject atcui

打开atcui/settings.py   配置
INSTALLED_APPS = (
    ...
    # Django ATC API
    'rest_framework',
    'atc_api',
    # Django ATC Demo UI
    'bootstrap_themes',
    'django_static_jquery',
    'atc_demo_ui',
    # Django ATC Profile Storage
    'atc_profile_storage',
)

打开 atcui/urls.py  配置
...
...
from django.views.generic.base import RedirectView
from django.conf.urls import include

urlpatterns = [
    ...
    # Django ATC API
    url(r'^api/v1/', include('atc_api.urls')),
    # Django ATC Demo UI
    url(r'^atc_demo_ui/', include('atc_demo_ui.urls')),
    # Django ATC profile storage
    url(r'^api/v1/profiles/', include('atc_profile_storage.urls')),
    url(r'^$', RedirectView.as_view(url='/atc_demo_ui/', permanent=False)),
]

更新Django的DB:
python manage.py migrate

然后run atc （启动后一个放着）:
sudo actd —actd-lan wlp7s0 —atcd-wan enp17s0    (lan wan  通过ifconfig 查看网卡名字是多少)

然后 run server :
python manage.py rumserver 0.0.0.0:8000

然后在android手机上，浏览器打开
http://192.168.0.174:8000     (ip从ifconfig中去找地址)

添加sample 的profiles
获取方式如下
apt-get install git
git clone https://github.com/facebook/augmented-traffic-control.git
apt-get install curl
cd augmented-traffic-control
utils/restore-profiles.sh localhost:8000


###(2)使用方法:
 链接对应测试wifi:

然后在android手机上，浏览器打开
http://192.168.0.174:8000

点profiles标签可以选择已经导入的配置项
具体如何选择:

turn on   //打开
select   //选择
update Shaping  //更新，选择网络之后，点击更新
turn off  //关闭

感受:
看了上面的配置过程就知道很麻烦。。。。当时弄了一天，这么长的配置中间肯定会遇到点问题。用起来还行，可以随意配置一些参数，他有sample的参数可以直接使用，但是国内外网络还是不一样的。

弱网络测试方法2:chrome profiler

上面的这种配置方式，相当于sever的那台电脑限制了流量，然后连上的手机，整体进行了限制,这种方式可以对任何需要联网的平台游戏或应用进行测试。
蛋如果仅仅是h5并且想用网页进行限制，而不用真机的话，可以用chrome 的profiler

在Performance 中选择network模式，也可以自定义，修改下载，上传速度和延迟延迟大小

补充工具 Snapdragon Profiler

在参加高通的一个讲座上看到的
Analyze CPU, GPU, DSP*, memory, power, thermal, and network data metrics

拥有功能有: real-time , trace capture , snapshot capture ,

要求:
1.比较新，需要高通骁龙820以上才行
2.需要android N ,或者 一个支持vulkan的android 6.0设备，

我下载的最新的profiler在我的mac上。。。。居然闪退。。没有做尝试了，这里只是介绍下，在讲座上看演示还是挺好的。大概功能其实跟chrome的类似。但是它可以通过android机器，看到更多底层的东西，更适合android native的app 或者游戏用。

可以看到当前渲染的texture的 资源

---

流量测试

是否有重复拉取简单的方法是用chrome的network工具，一直开着，看有没有重复加载的图片，重复加载的有可能是头一回没下载下来，没存在内存里，会反复拉取。
chrome profiler的network右下角，可以看到

腾讯的一个说的
基本把流量测试的方法都说了
http://tmq.qq.com/2016/05/android_traffic_statistics/
////////////////http://www.10tiao.com/html/179/201605/2652313673/1.html

tcpdump + wiresharke分析的
https://www.cnblogs.com/findyou/p/3491035.html

---

最后自己总结

发现之前的工具基本上分为两类
大厂的profiler 更全面(chrome , android studio ,Snapdragon )，满足基本的需求,且功能强大
其他的工具，个人或组织维护，对专门的领域更细致，可选项更多一些，有的可以自己定制，满足一些特殊需求

---

文中引用到的一些书籍的内容
* 《Android 应用性能优化最佳实践》 *
* 《Android 移动性能实战》 *
* 《腾讯Android 自动化测试实践》 *
还有一些参考的博客当时没有记录。。。抱歉

本文意图记录我在探索h5游戏测试性能工具时亲自用了，或者没有亲自测试但是可以推荐的工具。
具体工具使用，这里只是做了概要描述，而不意在着重赘述工具细节。有很多博客对具体工具做了更加详实的记录和介绍。可以网上找找。