基于phantomJS实现web性能监控

本文主要是介绍基于phantomJS实现web性能监控，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

随时随地技术实战干货，充分利用闲暇时间，请关注源代码社区公众号和技术交流群。

from：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对象，如下：

{“log”: {

“version” : “1.2”,

“creator” : {},

“browser” : {},

“pages”: [],

“entries”: [],

“comment”: “”

}