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

項目地址：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
複製代碼

2. 指定加載次數

# 加載baidu.com 100次
hiper -n 100 baidu.com
複製代碼

3. 禁用緩存

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
複製代碼

輸出