基于phantomJS实现web性能监控

浏览数：44 / 时间：2015年06月09日

转载，原文链接http://www.webryan.net/2013/02/web-page-test-based-on-phontomjs/

1、web性能监控背景描述

上期分享的《Web性能监控自动化探索之路–初识WebPageTest》从依赖webpagetest的角度给出了做性能日常检查的方案，但由于依赖结构相对复杂我们需要给出更简单的解决方案。测试同学没有快速投入的主要原因也是语言和维护成本相对比较大。但解决方案是多种多样的。那么我们再看下这个需求的本质：针对内外网环境需要定期对站点进行yslow和page speed检查，以保证在持续开发过程中保证质量。

对比webpagetest，我们再反思下手里的资源和特点：

1、对于固定的HTML结构，我们不需要多浏览器支持亦可以得到yslow和page speed等结论；

2、webkit是开源的；

3、pagespeed和yslow都是有开源sdk的；

那么我们的工作就变得很简单了，打包webkit实现一个不需要展示界面的程序（当然需要界面信息可以随时从UI线程里读取）生成需要的数据文件，并生成报表即可。流程简化如下：

1、通过QT或者phantomJS等webkit打包工具获取HTTP请求数据流HAR文件（这里采用phantomJS）；

2、通过HAR文件来生成请求瀑布图、yslow报告和page speed报告；

3、通过保存HAR文件来生成站点的趋势；

4、通过修改hosts文件来控制内网测试环境；

2、PhantomJS介绍

PhantomJS（http://phantomjs.org/）是支持JavaScript API的无界面、运行在服务端的webkit环境。它通过JavaScript和CoffeeScript控制webkit的各个模块，比如CSS Selector，JSON，Canvas、SVG和HTTP网络等等。它非常适合：

1、用来做服务端的网站测试，包括Qunit,Jasmin等等

2、屏幕截图抓取

3、网页DOM操作

4、网络情况监控

它提供了很多的examples，其中netsniff.js就是用于监控网络请求并生成HAR文件的。，如图所示：

3、HAR文件（HTTP Archive Specification）

HAR（HTTP Archive Specification），是一个用来储存HTTP请求/响应信息的通用文件格式，基于JSON。这个格式的出现可以使HTTP监测工具以一种通用的格式导出所收集的数据，这些数据可以被其他支持HAR的HTTP分析工具（包括Firebug,httpwatch,Fiddler等）所使用，来分析网站的性能瓶颈。目前HAR规范最新版本为HAR 1.2。HAR文件必须是UTF-8编码，有无BOM无所谓。

HAR数据结构：

一个HAR文件就是一个JSON对象，如下：

 1 {"log": {
 2 
 3 "version" : "1.2″,
 4 
 5 "creator" : {},
 6 
 7 "browser" : {},
 8 
 9 "pages": [],
10 
11 "entries": [],
12 
13 "comment": ""
14 
15 }
16 
17 }