微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第1张图片

前言

日常开发中,总是避免不了各种测试。

对于大厂,会有专业的测试团队,专业的测试小姐姐细致、完善的测试每一个环节,尽可能保证每个业务流程都能完整闭环,且经手的软件足以应对一些特殊场景。

针对小作坊,稍微可以点的,也是有着测试童鞋的存在,唯一缺陷是,测试小姐姐只是简单的进行人工流程一次次梳理、验证。只能说通过一次软件流程闭环,便是完美,而特殊情况时,还是比较尴尬的。

而小小小作坊,开发在日常开发工作中也占据了百分之九十的测试工作,甚至百分之百,针对这种情况,软件何谈质量?哎,也不能说的这么绝对,只能是无奈更多一些吧,心有余而力不足。

最近的小程序开发的差不多了,想起之前曾经使用过的 PerfDog,这里进行测试一波,看看效果。

不求每篇文章都能有所收获,至少这篇文章中,你可以了解到如下内容:

  • FPS 是什么?以及 FPS 的部分延伸。
  • PerfDog 简单使用,也就是如何在 iOS 上测试微信小程序?

记录测试,上传云端

由于目前公司配备的 Mac Pro 丐版,在安装了一部分工作软件后,已无更多空间,只能重新下载,再次体验,看看多日未见的 PerfDog,发生了哪儿些变化。 (PS:说的就好像它更新东西,我会知道一样,哈哈哈)

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第2张图片

对于丐版 Mac 而言,小 200 MB 的工具,似乎有点大了。

下载安装,注册账号登录,USB 连接手机一气呵成。

简单说下此页面的重点内容,如下图所示:

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第3张图片

  • 区域一为各项指标对应检测到的数据展示;
  • 区域二为指标控制,你可以在这里勾选你关注的那些指标。 (PS:话说这个按钮做的有些太不明显了)
  • 右上角播放按是开启/暂停录制测试数据并上传云端进行下一步分析。

熟悉微信小程序的小伙伴都知道微信小程序基于 H5,所以微信小程序渲染 UI 是通过系统浏览器 webkit 进行进程渲染。而 Android 和 iOS 两大平台实现方式则有一定差异,官方注明,Android 平台是开启独立进程,而 iOS 则没有开启独立进程。

这里选择测试应用时,需要先将小程序运行,随后在选择测试应用中选择展开 System Processes 并找到 com.apple.WebKit.WebContent 选择即可,如下所示:

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第4张图片

这里需要注意以下两点 (截取官方)

  • 如果没有 com.apple.WebKit.WebContent 这个选项,那么在微信中打开需要测试的小程序,之后在 system 中寻找并选中 com.apple.WebKit.WebContent 这个选项即可。
  • 如果有 com.apple.WebKit.WebContent 这个选项,那么记住他后面的数字,再在微信打开需要测试的小程序,选择大于该数字的 com.apple.WebKit.WebContent 选中即可。

随后点击右上角播放按钮,准备开始记录测试数据。操作完成再次点击播放按钮,上传云端。

最后点击顶部最右侧小云朵 icon,快速打开云平台进行分析。

云端分析,定位问题

打开云平台,展示了一条我们刚刚测试上传的结果,如下所示:

想为某个峰值较高的数据添加批注,双击设置即可。

如下这里截取我设置的项目中几个消耗性功能操作批注:

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第5张图片

FPS 简单了解

FPS,全称 Frames per second,也就是每秒帧数的意思。

而平时我们常刷的抖音小视频,或者某平台电影、连续剧,世纪都是由一幅幅图片组合形成的连续画面。也可以简单理解为,每一个图片也就代表了每一帧。

而人眼每秒可处理 10~12 个静止图像。所以,当在 12fps 或者更低的 fps 下,给我们的感官则是一堆静止的图像。一旦画面播放速率达到每秒 16~24fps 时,给我们的感官则是连续的场景了,也就是类似小视频等效果咯。

这里特意截取一老哥给的效果图,一起来感受下:

微信小程序 Notes|记录一次使用 PerfDog 工具进行装模作样的测试(FPS)_第6张图片

而在帧率中,常见的有如下几种:

  • 24fps
  • 30fps
  • 60fps

这几类分别有什么区别呢?

首先还是截取老哥的效果图,直观的感受下:

关于这几种 fps,通俗的理解就是每秒播放多少张图片,当然每秒播放的越多,呈现的效果越细腻,感官更好。但是随之而来的体积问题,也是不容忽视的。

FPS 分析

在 Android 里,满帧为 60 帧,计算每帧则是通过 1000/60 = 16.66,也就是说每帧低于 16 毫秒,则代表 App 运行流畅,反之则代表卡顿。而 iOS 同理。

简单的了解了下 FPS 相关基础,回过头来看我们的 App,最好的效果,最丝滑的 FPS 便是 60。至少看完我是这么理解的。

结合数据指标来看,百分之 18 的页面达到了 87.3fps,百分之 25 的页面达到了 84.5fps,而涉及到地图以及加载超大图,整体的 fps 平均值则降低到了 41.2。。

由于目前演示版本,具体内容客户还未敲定,关于超多大图,看了下,45 张图片,优化方案,压缩试试吧。

而关于地图操作这块,暂时未能有更好的解决方案,后期以观后效吧。

End

其实,如标题一样,称之为一次测试记录吧,似乎有点太过于勉强。

想了又想,应该叫做测试首战,或者测试基础知识了解更为贴切吧。

一枚 Android 开发,虽然现在啥都干。非专业测试,希望大佬多多指点~

有好用的测试平台记得留言哈~

参考资料

你可能感兴趣的:(微信小程序)