web统计页面性能的一种方式

July 01, 2019

有时对比技术方案时,我们需要统计一个页面的内存cpu以及网络消耗。然后通过求取平均值,获得对比数据。比如最近在预研webrtc和flvjs方案的内存,cpu以及网络消耗时,思考了好久来寻找能够很快对比,并且求取平均值的方式。

这种方式是基于mac系统命令来统计的,可能不适合windows用户。

在chrome里比较推荐的性能分析方式就是使用开发者模式里的Performance,但是当我们真正使用他来对比两种技术方案的内存和cpu消耗时,发现很难获取到直观的数据,Chrome Perfomance里的数据太详细了,比较适合分析页面卡顿,性能不佳时使用,但是用户对比两种实现的性能差距,有点不好用。

image-20190630141332576

统计内存和CPU

其实我们可以发现在chrome里有个任务管理器,可以直观地看到当前页面的内存和cpu消耗。但是不足的是,一直没有找到可以求取平均值或者是绘制一段时间内cpu、内存曲线的方式。

image-20190630142019500

但是,我发现任务管理器这里不是提供了当前页面的进程ID嘛。其实有了进程ID,我们可以自己用top命令来看这个进程的内存和CPU了。还能打印出来每段时间内的内存和CPU的使用,这样就可以随意做图或是求取平均值了。

使用下面命令就可以指定看一个进程的性能数据了

top -pid [进程id]

image-20190630142536583

然后我们再用下面这个命令把这些数据导入到文件里。

top -pid 46006 | grep 46006 > test1

image-20190630143343810

如上两列就是我们需要的内容了,再把文件复制到excel里,然后分列,就可以对这些数据随意处理了。

统计网络消耗

对于一般的网络消耗,其实使用Chrome的network很方便,但是webrtc这种特殊的传输方式,在network里并看不到网络消耗,那么就需要寻找另外的方式了。最后发现mac上有个网络分析工具,很强大—Nettop

这个东西能够显示当前电脑的网络连接, 有了这个就可以看对应连接的累计网络消耗了。当然,因为很底层,所以看到的信息很不友好,各种信息都有,想要找到对应的数据还不太容易。

image-20190630143859308

进入这个页面之后可以按一下h,然后可以有几个关键的按键介绍:

image-20190630144030712

可以看到按p可以选择进程,然后可以看到下面的画面:

image-20190630144211772

用空格勾选到不需要的进程,然后就可以只看到想看的内容了。

image-20190630144324273

只留下chrome的,然后就可以根据特征来寻找是哪个链接了,因为一般像视频流是一直下载的,会不停地增加。

image-20190630144852488

其实可能有更好的工具来做这件事,但是最后找到了这种方式还算比较简单易操作,而且对于内存和cpu的分析可以直接拿到时间点的数据,可以自己更加灵活地做分析数据。

本文首发于 一粟(https://www.zeyio.com),欢迎转载,但是必须保留本文的署名和链接。

本文永久链接:https://www.zeyio.com/web-analysis/