berserkJS —— 前端網路(效能)監測工具

edithfang發表於2014-07-10

berserkJS 是基於 Qt (C++跨平臺庫)開發的前端網路(效能)監測工具。 它的核心功能是通過內建 webkit 收集由頁面實際網路請求相關資料。 偏重於頁面上線前檢測與評估。

頁面效能分析工具,可用 JS 編寫自己的檢測、分析規則。 基於 Qt 開發,可跨平臺編譯,部署。內建基於 QtWebkit 的瀏覽器環境。 原始碼需在目標系統中編譯後,可產生執行於 Windows / Linux / Mac 系統的可執行檔案。 工程中自帶 Window 系統中動態編譯的可執行檔案,此檔案位於 bulid 目錄下。


使用案例
  • 無介面瀏覽器測試:在不依賴本地任何瀏覽器的情況下,執行測試框架,如 QUnit,Capybara, QUnit, Mocha, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework 等。
  • 頁面自動化:可以無障礙訪問和操作網頁的標準 DOM API 以及頁面所用 JS 變數、物件、屬性等內容。
  • 螢幕捕獲:以程式設計方式獲取網頁全部或部分內容,可根據 Selector 擷取指定 DOM 元素渲染情況;包括 CSS,SVG 和 Canvas。可將擷取圖片 base64 化,以便傳送給遠端伺服器儲存。
  • 網路監控:自動化的網路效能監控,跟蹤頁面所有資源載入情況並可簡便的將輸出結果格式化為標準HAR格式。
  • 頁面效能監控:自動化的頁面渲染監控,可獲取 CPU、 記憶體使用情況資料,根據頁面整體情況可簡便的輸出首次渲染時間、首屏渲染時間等關鍵資料。
工具特性
  • 跨平臺性:基於 Qt 開發,可跨平臺編譯,部署。內建基於 QtWebkit 的瀏覽器環境。原始碼需在目標系統中編譯後,可產生執行於 Windows / Linux / Mac 系統的可執行檔案。
  • 功能性:工具內建 webkit 瀏覽器核心,可響應瀏覽器核心事件回撥、支援傳送滑鼠訊息給瀏覽器、包裝瀏覽器網路請求資料為JS資料格式、可與瀏覽器內JS做資料互動。
  • 開放性:工具將主要操作均包裝為JS語法與資料格式,採用JS語法包裝,前端工程師可根據API組裝出符合各自預期的檢測功能。
  • 介面性:工具本身支援命令列引數,可帶參呼叫。API支援處理外部程式讀取輸出流、支援HTTP傳送資料。可由 WEB 程式遠端呼叫後獲取測試的返回結果。
  • 標準性:完全真實的瀏覽器環境內 DOM,CSS,JavaScript,Canvas,SVG 可供使用,絕無模擬模擬。
特點差異

與 PhantomJS 相比具有以下不同:
  • API 簡易: 更直接的 API,如獲取網路效能資料,僅需 3 行程式碼,而非 PhantomJS 的幾十行,且資訊量比 PhantomJS 豐富。
  • API 標準化: 常用 API 均採用 W3 規範標準命名,事件處理程式碼可重複繫結而不相互覆蓋,可以無縫相容 Wind.JS 等非同步流程處理庫來解決自動化時非同步流程控制問題。
  • 頁面效能資訊豐富:具有頁面渲染和 CPU、 記憶體使用情況資料獲取能力,可輸出首次渲染時間、首屏渲染時間等頁面效能關鍵資料。
  • 除錯便利: 具有 GUI 介面與命令列狀態兩種形式,開發除錯期可使用 GUI 模式定位問題,此模式中可開啟 WebKit 的 Inspector 工具輔助除錯頁面程式碼與 DOM 。實際執行時可開啟命令列狀態避免自動執行時 GUI 介面干擾。

應用企業
  • 新浪微博:已使用 berserkJS 構建前端效能監測資料分析平臺,防止微博主要產品在不停開發迭代時,頁面效能產生退化。
  • Cisco: 用於 WebEx 專案的自動化測試
評論(0)

相關文章