前端網絡(性能)監測工具:berserkJS
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 項目的自動化測試