轉載，原文鏈接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 “version” : “1.2″, 3 “creator” : {}, 4 “browser” : {}, 5 “pages”: [], 6 “entries”: [], 7 “comment”: “” 8 } 9 }
- 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>為空。
4、Page Speed SDK和YSLOW
首先我們現在google的Page Speed站點上下載安裝SDK。http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2。
然后把通過phontomJS獲取的har文件進行解析。
這邊已經可以通過命令行獲取到具體的分數和建議。
同理我們也可以獲取yslow的分數。
5、HAR Viewer
HAR Viewer（http://www.softwareishard.com/har/viewer/）是基於Javascript的一個很強大的HAR分析工具，它可以將HAR文件以瀑布流和餅圖等形式進行展示。源代碼在這里：http://code.google.com/p/harviewer/。
這些圖片結合HAR的產生和pagespeed的評分建議是不是很酷！
6、后續的事兒
把站點的HAR文件用數據庫的形式存儲，建立趨勢對比的文檔。把自助工具建立成站點。
參考URL：
1、http://phontomjs.org
2、http://httparchive.org/about.php#harfile
3、http://weizhifeng.wordpress.com/2011/03/26/http-archive-specification-chinese/
4、http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/
5、http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2
6、http://groups.google.com/group/http-archive-specification