[轉]基於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性能監控, 感謝原做者分享。