用命令行统计web页面运行时性能

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

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

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

image.png

统计内存和CPU

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

image.png

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

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

top -pid [进程id]

image.png

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

top -pid 46006 | grep 46006 > test1

image.png

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

统计网络消耗

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

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

image.png

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

image.png

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

image.png

image.png

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

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

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

如果您还有什么更好的方式，不妨分享出来。