APP-hybrid页面性能测试的一些知识记录

本文作者:ivweb caorich 原文出处:IVWEB社区 未经同意,禁止转载

做hybrid页面,需要测试其性能。我们不能认为用浏览器打开该网页得到的数据就算它线上的性能,因为webview的环境,其性能和浏览器还是有所差距的。最近一直做相关工作,积累的一些小经验,这里分享出来。

打点

统计线上hybrid页面的性能,本质上还是打点上报。打的点一般参考performance.timing属性。一般页面最开始给一个初始绝对时间点作为参考,其余的点减去这个初始时间就是页面渲染的相对时间了。

如果没有客户端给初始时间点,可以用performance.timing.fetchStart作为初始时间点。我这里根据上报情况看,fetchStart和客户端给的绝对初始时间差距并不大。另外,如果页面有重定向,performance.timing.redirectStart参数就不为0,将这个参数值作为初始时间应该更加合理。

html文档的加载时间:

performance.timing.domLoading - performance.timing.fetchStart

timing.domInteractive这个时间点并不太稳定,如果需要统计js执行的时间点,还是自己打点比较好。

更加详细的performing.timing打点属性可以参考这篇文章

性能测试

由于是hybrid页面的性能测试,我们不可避免的无法进行白盒测试。如果需要测试页面滚动的fps、cpu、内存使用情况该怎么办嗯?只能借助一些小工具来完成本地测试。这里列出一些(多半是针对android,因为ios不越狱就很难获取相关信息):

gpu渲染的第一印象

要分析一个页面的卡不卡,可以先看看现在的gpu渲染情况。打开android设置->开发者选项->GPU呈现模式->柱形图。可以看到屏幕上出现杂乱柱状图,靠近底部的绿色的线代表16.7ms,也就是每秒60帧的阈值,如果一个柱状条很高很高,上部的黄色部分很小,就说明这里有几帧被丢掉了。因为CPU没有在规定的时间内提交displayList。

打开知乎app,随便滚动一下。发现一柱擎天,说明有一帧丢掉了。

这里简单说下各种颜色的柱状条代表什么。更加详细的可以google的官方文档

  • 绿色: 你的主线程的运行时间,在这个时间里,你的业务代码正在飞速转动
  • 深蓝色:render线程的onDraw方法的执行时间,最终生成displayList。
  • 浅蓝色:加载图片资源的时间。实际上是将内存中的位图资源转换到显存中的时间。如果你非要将一张10241024的图片渲染到5050大小,这段时间就会变长。
  • 红色: 将displayList转换成原生渲染命令,并且发送(issue)到一个队列里。如果深蓝色的过程很长,这一部分也势必很长。不过,displayList可以缓存,渲染命令不能缓存。
  • 黄色:swap时间。cpu完成了上面的红色时间,将所有渲染命令(issue command)丢到队列里面就直接转到下一帧的渲染任务上去了,如果GPU不够快,那么这个队列就会满,如果队列满了,cpu就会等待入队渲染命令。黄色区域就是cpu的等待时间。如果像上图一样,一直存在swap时间。说明GPU的渲染是滞后的。不过没关系,你看到的页面同样是流畅的。

gpu的渲染数据

上面的柱状图只能看到一个直观的印象,如果你想获取这些柱状图的数据,需要安装adb开发包。 安装后,插上android手机,在终端运行命令:

adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats

具体的参照这篇文章

页面的流畅性

要保证页面滚动和动画的流畅,可能第一想到的指标是FPS,没错,但是还有另外一个衍生的指标也很重要:帧方差。帧方差就是FPS序列的方差,越小,说明页面滚动越平滑。

FPS黑盒测量

android7.0以下的手机可以用Emmagee软件来进行测试。非常方便,每秒统计一次,直接生成csv以待分析。

或者用adb工具来测试:

$ cd android-sdk/platform-tools/systrace
$ python systrace.py --time=10 -o mynewtrace.html sched gfx view wm

将改变time将改变监控测试时间。 然后打开你的app,出发动画和滚动,直到测试结束。

这个时候本地文件中将出现mynewtrace.html文件,点开看一看可以发现像时间线一样的视图数据。需要提取数据用命令:

$ grep 'postFramebuffer' mynewtrace.html | sed -e 's/.]\W//g' -e 's/:.*$//g' -e 's/.//g' > data.csv

然后进行后续的分析。

数据分析

假设现在拿到了第一手csv,需要进行加工处理。一开始着手这样工作的时候真是没少走弯路。主要是:

  • 本以为用excel分分钟搞定的数据处理任务,但花了数倍的时间还未搞定。
  • 缺少养眼的统计图表模板,画出来的统计图表像倒退了10年的产品。

这里安利一个统计工具: R语言。做毕设的时候浅度用过。主要是你想要某种统计效果时候,它并不耽误你的时间。比如:

以分析RN的框架时间为例:

读取数据:

table<-read.table('./native-time.csv', sep=',', header=TRUE, fileEncoding='utf-8')

查看平均值:

mean(table$time)

看看框架时间的分布:

qplot(time, data=table, geom="density")

WTF!居然有些用户框架时间超过了3秒,这怎么能忍?统计一下!

lowUsers<-subset(table, (time>3000))
nrow(lowUsers)/nrow(table)   //0.012

可见1.24%的用户的框架时间高于3s,太慢了。能不能统计一下,是不是和ios的版本有关呢?

绘图按照UserAgent分类一下:

qplot(table, data=lowUsers, colour=factor(ua), geom="histogram",  xlim=c(3000,5000), facets = factor(ua)~.)

很明显,可以去调研下有颜色的这三个ios版本,它们比较慢。

R更多的是一个方便的表单数据处理工具,用来分片、筛选、算总数、平均、方差等等常用的操作实在太方便了。伴随着你的思考,几条命令就可以实现了。用熟悉了是很节省时间的事情。

原文出处:IVWEB社区 未经同意,禁止转载

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专知

Python网络爬虫与信息抽取笔记06 爬虫实战2

1452
来自专栏用户2442861的专栏

Tesseract:安装与命令行使用

http://www.zmonster.me/2015/04/17/tesseract-install-usage.html

711
来自专栏Coco的专栏

【前端性能】Web 动画帧率(FPS)计算

2209
来自专栏开源优测

哪些年从事自动化测试需要经历的往事

在实战中,又去接触了watir,即ruby版的selenium,又是一通的直接看源码,顺便学习和了解ruby

742
来自专栏iOSDevLog

Google Colab免费GPU教程

现在,你可以开发深度学习与应用谷歌Colaboratory -on的免费特斯拉K80 GPU -使用Keras,Tensorflow和PyTorch。

1965
来自专栏应用案例

RIOT 与 ImageOptim - 两款 Win 和 Mac 上好用的免费图片优化无损压缩工具

不管你是网站站长、自媒体、博客作者、摄影师、设计师,还是需要在网上分享传输图片/照片的人,都希望自己上传图片耗时更短、图片体积更小,别人浏览时又能更快下载显示出...

3525
来自专栏ATYUN订阅号

使用Python对Instagram进行数据分析

Instagram是最大的照片分享社交媒体平台,每月有5亿活跃用户,每天会上传9500万张照片和视频到Instagram上。它有大量的数据和巨大的潜力。这篇文章...

3454
来自专栏QQ音乐前端团队专栏

制作60fps的高性能动画

说到web的高性能动画,这部分内容其实已经是老生常谈的了,不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。

4364
来自专栏玄魂工作室

CTF实战3 Wireshark网络嗅探工具使用

Wireshark可以打开多种网络分析软件捕捉的包,可以支持许多协议的解码。我们可以用它来检测网络安全隐患、解决网络问题,也可以用它来学习网络协议、测试协议执行...

693
来自专栏大数据挖掘DT机器学习

Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录

Python 2.7 IDE Pycharm 5.0.3 Firefox浏览器:47.0.1 PIL : Pillow-3.3.0-cp27-cp27m-...

4268

扫码关注云+社区