真•業界第一個效能統計分析框架 -- Hiper

pod發表於2018-06-04
框架

專案地址：https://github.com/pod4g/hiper 歡迎大家使用和star

介紹

我們開發完一個專案或者給一個專案做完效能優化以後，如何來衡量這個專案的效能是否達標？我們的常見方式是在Dev Tool中的performance和network中看資料，記錄下幾個關鍵的效能指標，然後重新整理幾次再看這些效能指標， 有時候我們發現，由於樣本太少，受當前「網路」、「CPU」、「記憶體」的繁忙程度的影響很重，有時優化後的專案反而比優化前更慢。如果有一個工具，一次性地請求N次網頁，然後把各個效能指標取出來求平均值，我們就能非常準確地知道這個優化是「正優化」還是「負優化」。並且，也可以做對比，拿到「具體優化了多少」的準確資料。這個工具就是為了解決這個痛點的。

同時，這個工具也是學習「瀏覽器載入渲染網頁過程」和「效能優化」的一個利器，因此我們也可以把他作為一個強大的學習輔助工具，不至於讓我們在樣本過少的情況下得到錯誤的結論。

安裝

# install
npm i hiper -g

# or
yarn global add hiper
複製程式碼

使用

hiper --help

Usage: hiper [options] [url]

? A statistical analysis tool for performance testing

Options:

   -v, --version                output the version number
   -n, --count <n>              指定載入次數（default: 20）
   -c, --config <path>          載入配置檔案
   -u, --useragent <ua>         設定useragent
   -H, --headless [b]           是否使用無頭模式（default: true）
   -e, --executablePath <path>  使用指定的chrome瀏覽器
   --no-cache                   禁用快取（default: false）
   --no-javascript              禁用javascript（default: false）
   --no-online                  離線模式（defalut: false）
   -h, --help                   output usage information
複製程式碼

用例

  1. 最簡單的方式
hiper baidu.com
複製程式碼
  1. 指定載入次數
# 載入baidu.com 100次
hiper -n 100 baidu.com
複製程式碼
  1. 禁用快取
hiper -n 100 baidu.com --no-cache
複製程式碼

配置

{
   // options 指向指定的chrome可執行程式，一般不用這項配置，除非你想測試特定版本的chrome
   "executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
   // required 測試的url
   "url": "http://www.didichuxing.com",
   // options 本次測試所需要的cookie。一般是登入資訊的cookie。 Array | Object
   "cookies": [{
      "name": "token",
      "value": "9+cL224Xh6VuRT",
      "domain": "example.com",
      "path": "/",
      "size": 294,
      "httpOnly": true
   }],
   // options default: 20 測試次數
   "count": 100,
   // options default: true 是否使用無頭模式 
   "headless": true,
   // options default: false 是否禁用cache 
   "noCache": false,
   // options default: false 是否禁用javascript
   "noJavascript": false,
   // options default: false 是否離線
   "noOnline": false,
   // options 設定useragent資訊
   "useragent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36",
   // options 設定viewport資訊
   "viewport": {
      // options 視口寬度
      "width": 375,
      // options 視口高度
      "height": 812,
      // options default: 1 devicePixelRatio
      "deviceScaleFactor": 3,
      // options default: false 是否模擬成mobile
      "isMobile": false,
      // options default: false 是否支援touch事件
      "hasTouch": false,
      // options default: false 是否是橫屏
      "isLandscape": false
   }
}
複製程式碼
# 載入上述配置檔案
hiper -c /home/config.json
複製程式碼

輸出

hiper

相關文章