hiper
1.0.0
Anglais | 中文
Un outil d'analyse statistique pour les tests de performance
Le nom est court pour Hi par formance Ou salut gh par formance
Salut les gars, veuillez présenter votre numéro en anglais
请使用英语提 problème
npm install hiper -g
# or use yarn:
# yarn global add hiper Remarque: It takes period (m)s to load ... La period signifie que ce test prend du temps . Donc, ne montez pas et la période monte. pas un bug
| Clé | Valeur |
|---|---|
| Temps de recherche DNS | DomainlookUndend - DomainlookupStart |
| Heure de connexion TCP | Connend - ConnectStart |
| Ttfb | ResponseStart - demande |
| Télécharger l'heure de la page | ResponseDend - Responsestart |
| Après Dom Ready Téléchargez l'heure | DomComplete - Dominteractive |
| Temps d'écran blanc | Dominteractive - NavigationStart |
| Dom Ready Time | DomContentSoLoadEDentend - NavigationStart |
| Temps de chargement | Loadetentend - NavigationStart |
https://developer.mozilla.org/en-us/docs/web/api/performancetiming
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 informationPar exemple
# 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 " .json et .js Config {
// 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
}
}Avoir un fichier JS pour la configuration permet aux gens d'utiliser des variables Env. Par exemple, disons que je souhaite tester le site sur un état authentifié. Je peux passer un cookie qui est utilisé pour m'identifier via des variables Env et avoir un fichier de configuration basé sur JS le rend simple. Par exemple
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.jsAprès avoir développé un projet ou optimisé les performances d'un projet,
Comment mesurer les performances de ce projet?
Une approche commune consiste à examiner les données des performance et network dans l' Dev Tool , d'enregistrer quelques mesures de performance clés et de les actualiser plusieurs fois avant de regarder ces mesures de performance,
Parfois, nous constatons qu'en raison de la petite taille de l'échantillon, la charge actuelle du réseau / CPU / mémoire est fortement affectée, et parfois le projet optimisé est plus lent qu'avant l'optimisation.
S'il y a un outil, demandez une page Web plusieurs fois, puis en supprimant les différents indicateurs de performance en moyenne, nous pouvons très précisément savoir que l'optimisation est positive ou négative.
De plus, vous pouvez également faire une comparaison et obtenir des données précises sur la quantité d'optimisation . Cet outil est conçu pour résoudre le point de douleur.
Dans le même temps, cet outil est également un bon outil pour nous apprendre sur le "processus de chargement du navigateur et de rendu" et "optimisation des performances", afin que nous n'obtenions pas de mauvaises conclusions lorsqu'il y a trop peu d'échantillons
Mit
Star de bienvenue et PR
Copyright (C) 2018 Liyanfeng (POD4G)
