hiper
1.0.0
英語| 中文
パフォーマンステストのための統計分析ツール
名前は、フォーマンスごとのHIの略ですまたは、フォーマンスごとにこんにちは
こんにちはみんな、あなたの問題を英語で提示してください
请使用英语提問題
npm install hiper -g
# or use yarn:
# yarn global add hiper 通知： It takes period (m)s to load ... periodこのテストに時間がかかることを意味します。だから-nは上がり、期間が上がります。バグではありません
| 鍵 | 価値 |
|---|---|
| DNSルックアップ時間 | domainlookUpend -domainlookupstart |
| TCP接続時間 | ConnectEnd -ConnectStart |
| TTFB | resportesstart -request -start |
| ページの時間をダウンロードします | ResponseEnd -ResponseStart |
| DOMの準備ができた後、ダウンロード時間 | domcomplete -dominteractive |
| 白い画面時間 | dominteractive -navigationStart |
| DOMの準備時間 | domcontentloadedeventend -NavigationStart |
| 読み込み時間 | loadeventend -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 information例えば
# 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および.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
}
}構成用のJSファイルを使用すると、ENV変数を使用できます。たとえば、認証された状態でサイトをテストしたいとしましょう。 ENV変数を介して私を識別するために使用されるいくつかのCookieを渡すことができ、JSベースの構成ファイルを使用すると、これが簡単になります。例えば
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プロジェクトを開発した後、またはプロジェクトのパフォーマンスを最適化した後、
このプロジェクトのパフォーマンスをどのように測定しますか？
一般的なアプローチは、 Dev Toolのperformanceとnetworkのデータを調べ、いくつかの重要なパフォーマンスメトリックを記録し、それらのパフォーマンスメトリックを見る前に数回更新することです。
サンプルサイズが小さいため、現在のネットワーク/CPU/メモリの負荷が大きな影響を受け、最適化されたプロジェクトが最適化の前よりも遅くなることがあることがわかります。
ツールがある場合は、Webページを何度もリクエストしてから、さまざまなパフォーマンスインジケーターを平均化すると、最適化が肯定的または否定的であることが非常に正確にわかります。
さらに、比較を行い、最適化された量に関する正確なデータを取得することもできます。このツールは、問題点を解くように設計されています。
同時に、このツールは、「ブラウザの負荷とレンダリングのプロセス」と「パフォーマンスの最適化」について学ぶための優れたツールでもあるため、サンプルが少なすぎると結論が誤っていません。
mit
ようこそスターとPR
著作権（c）2018 liyanfeng（pod4g）
