English | Chinese

🚀 a delightful performance statistical analysis tool

Hiper

It can be short for Hi performance or High performance

Matters needing attention

Please use “issue” in English

The installation

NPM install hiper -g: # yarn global add hiperCopy the code

The output

Note: It takes period (m)s to load…. This period is the time to run this test. So the larger the -n is, the larger this number is

Performance indicators

Key Value
DNS Query Time domainLookupEnd – domainLookupStart
TCP Connection Time connectEnd – connectStart
The time taken for the first Byte to reach the browser responseStart – requestStart
Page download time responseEnd – responseStart
How long it takes for DOM Ready to download resources again domComplete – domInteractive
Bad time domInteractive – navigationStart
The DOM Ready time consuming domContentLoadedEventEnd – navigationStart
Total page loading time loadEventEnd – navigationStart

Developer.mozilla.org/zh-CN/docs/…

use

Hiper --help Usage: hiper [options] [url] 🚀 -v, --version Output version number -n, --count <n> Specify loading times (default 20 times) -c, --config <path> Load the specified configuration file -u, -- userAgent <ua> Set userAgent -h, --headless [b] whether to use headless mode (default: true) -e, ExecutablePath <path> Use the specified Chrome browser --no-cache disables caching (default: false) --no-javascript disables javascript (default: false) --no-online Disable the network (default: False) -h, --help displays help informationCopy the code

Use cases

# when we omit the protocol header, the default is to add 'https://' # Please use double quotation marks to enclose hiper "baidu.com? A =1&b=2" # load specified page 100 times hiper-n 100 "baidu.com? A =1&b=2" # Disable cache load specified page 100 times hiper-n 100 "Baidu.com? A =1&b=2" --no-cache # False # Load the specified page 100 times using the specified userAgent hiper-n 100 "baidu.com? A =1&b=2" -u "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"Copy the code

configuration

support.json 和 .jsFormat of a configuration file

  1. json
{// options points to Executables for Chrome, which you generally don't need to configure unless you want to test a specific version of Chrome's "executablePath": "/ Applications/Google Chrome app/Contents/MacOS/Google Chrome", / / required to test the url of the "url" : "Https://example.com", / / the options of this test requires Cookies, usually is the login information (that is, the test page you need to login) Array | Object "Cookies" : [{" name ": "token", "value": "9+cL224Xh6VuRT", "domain": "example.com", "path": "/", "size": 294, "httpOnly": }], // options test number default is 20 "count": 100, // options whether to use headless mode default is true "headless": True, // options whether caching is disabled default: false "noCache": false, // options whether JavaScript is disabled Default: false "noJavascript": The default is false. "noOnline": false, // options sets the specified userAgent information. "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", "Viewport ": {// options "width": 375, // options "height": 812, // options devicePixelRatio defaults to 1 "deviceScaleFactor": 3, // options emulated as mobile Default is false "isMobile": False, // options support touch time default is false "hasTouch": false, // options support landscape mode default is false "isLandscape": false}}Copy the code
  1. js

The configured JS file allows people to use the ENV variable. For example, suppose you want to test your site in an authenticated state. You can pass some cookies that identify you via the ENV variable, and having a JS-BASED configuration file makes this easy. For example,

module.exports = {
    ....
    cookies:  [{
        name: 'token',
        value: process.env.authtoken,
        domain: 'example.com',
        path: '/',
        httpOnly: true
    }],
    ....
}Copy the code
Json/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.js/hiper -c /home/config.jsCopy the code

Pain points

After we develop a project or optimize the performance of a project, how to measure whether the project’s performance is up to standard?

A common approach is to look at the data in Dev Tool’s Performance and network, record a few key performance metrics, and refresh a few times to look at those performance metrics.

Sometimes we find that due to too few samples, the current “network”, “CPU”, “memory” busy degree is heavily affected, sometimes the optimized project is slower than before optimization.

If we have a tool that requests pages N times at a time and then averages the performance metrics, we can know with great accuracy whether the optimization is “positive optimization” or “negative optimization.”

Also, you can do a comparison and get the exact data of how much is optimized. This tool is designed to address that pain point.

It’s also a great tool for learning about “how browsers load and render web pages” and “performance optimization,” so we can use it as a powerful learning aid to prevent us from drawing wrong conclusions with too few samples.

The blueprint

  1. Better documentation
  2. internationalization
  3. Statistical analysis of page dependent resources
  4. Generate a performance statistics report
  5. Data visualization

How to contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am ‘Add some feature’)
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

agreement

MIT

Welcome Star and PR

Copyright (c) 2018 liyanfeng(pod4g)