hiper -Download - hiper Source Code Download

hiper

Website-Daten

1.0.0

Herunterladen

Englisch | 中文

Ein statistisches Analysetool für Leistungstests

Hiper

Der Name ist kurz für Hi pro Formance ~~Oder hi gh pro Formanz~~

Wichtig

Hallo Leute, bitte präsentieren Sie Ihr Problem in Englisch

请使用英语提 Ausgabe

Installieren

npm install hiper -g

# or use yarn:
# yarn global add hiper

Die Ausgabe

Beachten Sie: It takes period (m)s to load ... Der period bedeutet, dass dieser Test Zeit braucht . Also -n steigen und die Zeit steigt. Kein Fehler

Performance

Schlüssel	Wert
DNS -Lookup -Zeit	DomainLookupend - Domainlookupstart
TCP -Verbindungszeit	Connectend - Connectstart
Ttfb	ResponTestart - RequestStart
Laden Sie die Zeit der Seite herunter	Reaktionsend - Responsedart
Nach DOM -Ready -Download -Zeit	DOMCOMPLETE - domininaktiv
Weiße Bildschirmzeit	Dominant - NavigationStart
Dom Ready Time	DomContentLoadEdEventend - NavigationStart
Ladezeit	Loadeventend - NavigationStart

https://developer.mozilla.org/en-us/docs/web/api/performancetiming

Verwendung

hiper --help

Usage: hiper [options] [url]

 A statistical analysis tool for performance testing

Options:

   -v, --version                output the version number
   -n, --count < n >              specified loading times (default: 20)
   -c, --config < path >          load the configuration file
   -u, --useragent < ua >         to set the useragent
   -H, --headless [b]           whether to use headless mode (default: true)
   -e, --executablePath < path >  use the specified chrome browser
   --no-cache                   disable cache (default: false)
   --no-javascript              disable javascript (default: false)
   --no-online                  disable network (defalut: false)
   -h, --help                   output usage information

Zum Beispiel

 # We can omit the protocol header if has omitted, the protocol header will be `https://`

 # The simplest usage
 hiper baidu.com

 # if the url has any parameter, surround the url with double quotes
 hiper " baidu.com?a=1&b=2 "

 #  Load the specified page 100 times
 hiper -n 100 " baidu.com?a=1&b=2 "

 #  Load the specified page 100 times without `cache`
 hiper -n 100 " baidu.com?a=1&b=2 " --no-cache

 #  Load the specified page 100 times without `javascript`
 hiper -n 100 " baidu.com?a=1&b=2 " --no-javascript
 
 #  Load the specified page 100 times with `headless = false`
 hiper -n 100 " baidu.com?a=1&b=2 " -H false

 #  Load the specified page 100 times with set `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 "

Konfiguration

Unterstützung `.json` und `.js` config

JSON

 {
   // options Pointing to a specific chrome executable, this configuration is generally not required unless you want to test a specific version of chrome
   "executablePath" : "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" ,
   // required The url you want to test
   "url" : "https://example.com" ,
   // options Cookies required for this test. It's usually a cookie for login information Array | Object
   "cookies" : [ {
      "name" : "token" ,
      "value" : "9+cL224Xh6VuRT" ,
      "domain" : "example.com" ,
      "path" : "/" ,
      "size" : 294 ,
      "httpOnly" : true
   } ] ,
   // options default: 20 Test times
   "count" : 100 ,
   // options default: true Whether to use headless mode 
   "headless" : true ,
   // options default: false Disable cache 
   "noCache" : false ,
   // options default: false Disable javascript
   "noJavascript" : false ,
   // options default: false Disable network
   "noOnline" : false ,
   // options Set the 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" ,
   // options Set the viewport information
   "viewport" : {
      // options
      "width" : 375 ,
      // options
      "height" : 812 ,
      // options default: 1 devicePixelRatio
      "deviceScaleFactor" : 3 ,
      // options default: false Whether to simulate mobile
      "isMobile" : false ,
      // options default: false Whether touch events are supported
      "hasTouch" : false ,
      // options default: false Is it horizontal or not
      "isLandscape" : false
   }
}

JS

Mit einer JS -Datei für die Konfiguration können Personen Env -Variablen verwenden. Angenommen, ich möchte die Site in einem authentifizierten Zustand testen. Ich kann etwas Cookie übergeben, mit dem ich durch Env -Variablen identifiziert wird, und eine JS -basierte Konfigurationsdatei macht dies einfach. Zum Beispiel

 module . exports = {
    ... .
    cookies :  [ {
        name : 'token' ,
        value : process . env . authtoken ,
        domain : 'example.com' ,
        path : '/' ,
        httpOnly : true
    } ] ,
    ... .
}

 # Load the above configuration file (Let's say this file is under /home/)
hiper -c /home/config.json

# Or you can also use JS files for configuration
hiper -c /home/config.js

Schmerzpunkt

Nachdem wir ein Projekt entwickelt oder die Leistung eines Projekts optimiert haben,

Wie messen wir die Leistung dieses Projekts?

Ein allgemeiner Ansatz besteht darin, die Daten in der performance und network im Dev Tool zu prüfen, einige wichtige Leistungsmetriken aufzuzeichnen und sie einige Male zu aktualisieren, bevor sie sich diese Leistungsmetriken ansehen.

Manchmal stellen wir fest, dass aufgrund der kleinen Stichprobengröße die aktuelle Netzwerk-/CPU-/Speicherbelastung stark beeinflusst wird, und manchmal ist das optimierte Projekt langsamer als vor der Optimierung.

Wenn es ein Tool gibt, fordern Sie die Webseite um ein Vielfaches an und nehmen Sie dann die verschiedenen Durchschnittsindikatoren heraus, wir können sehr genau wissen, dass die Optimierung positiv oder negativ ist.

Darüber hinaus können Sie auch einen Vergleich vornehmen und genaue Daten darüber erhalten , wie viel Sie optimiert haben . Dieses Werkzeug wurde entwickelt, um den Schmerzpunkt zu lösen.

Gleichzeitig ist dieses Tool auch ein gutes Werkzeug für uns, um den "Last- und Rendernprozess des Browsers" und "Leistungsoptimierung" zu erfahren, damit wir keine falschen Schlussfolgerungen erhalten