[转]基于phantomJS实现web性能监控

一、web性能监控背景描述

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

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

一、对于固定的HTML结构，咱们不须要多浏览器支持亦能够获得yslow和page speed等结论

二、webkit是开源的：）

三、pagespeed和yslow都是有开源sdk的。

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

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

二、经过HAR文件来生成请求瀑布图、yslow报告和page speed报告()

三、经过保存HAR文件来生成站点的趋势

四、经过修改hosts文件来控制内网测试环境

二、PhantomJS介绍

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

一、用来作服务端的网站测试，包括Qunit,Jasmin等等。

二、屏幕截图抓取

三、网页DOM操做

四、网络状况监控

它提供了不少的examples，其中netsniff.js就是用于监控网络请求并生成HAR文件的。

三、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”: “”

}

}

• version [string] – 版本，默认为1.1。
• creator [object] – 建立HAR文件的程序名称和版本信息。
• browser [object, 可选] – 浏览器的名称和版本信息。
• pages [array, 可选] – 页面列表，若是应用不支持按照page分组，能够省去此字段。
• entries [array] – 全部HTTP请求的列表。
• comment [string, 可选] (new in 1.2) – 注释。

注：每一个页面对应一个<page>对象，每一个HTTP请求对应一个<entry>对象。若是HTTP的监测分析工具不能把请求按照page分组，那么<pages>为空。

四、Page Speed SDK和YSLOW

首先咱们如今google的Page Speed站点上下载安装SDK。http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2。

而后把经过phontomJS获取的har文件进行解析。

这边已经能够经过命令行获取到具体的分数和建议。

同理咱们也能够获取yslow的分数。

五、HAR Viewer

HAR Viewer（http://www.softwareishard.com/har/viewer/）是基于Javascript的一个很强大的HAR分析工具，它能够将HAR文件以瀑布流和饼图等形式进行展现。源代码在这里：http://code.google.com/p/harviewer/。

这些图片结合HAR的产生和pagespeed的评分建议是否是很酷！

六、后续的事儿

把站点的HAR文件用数据库的形式存储，创建趋势对比的文档。把自助工具创建成站点。

参考URL：

一、http://phontomjs.org 

二、http://httparchive.org/about.php#harfile

三、http://weizhifeng.wordpress.com/2011/03/26/http-archive-specification-chinese/

四、http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/

五、http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2

六、http://groups.google.com/group/http-archive-specification

原文地址： 基于phantomJS实现web性能监控, 感谢原做者分享。