영어 | 中文
성능 테스트를위한 통계 분석 도구
이름은 형성 당 HI 의 이름이 짧습니다 또는 형성 당 HI GH
안녕하세요 여러분, 귀하의 문제를 영어로 제시하십시오
请使用英语提 문제
npm install hiper -g
# or use yarn:
# yarn global add hiper 통지 : It takes period (m)s to load ... period 이 테스트에 시간이 걸린다는 것을 의미합니다. 그래서 -올라 가면 기간이 올라갑니다. 버그가 아닙니다
| 열쇠 | 값 |
|---|---|
| DNS 조회 시간 | DomainLookUpend -DomainLookupStart |
| TCP 연결 시간 | Connectend -ConnectStart |
| TTFB | ResponseStart -requestStart |
| 페이지의 시간을 다운로드하십시오 | 응답 엔드 - responsestart |
| DOM 준비 후 다운로드 시간 | domcomplete- 지배적 |
| 흰색 화면 시간 | DominterActive -NavigationStart |
| DOM 준비 시간 | domContentLoadEdeventend -NavigationStart |
| 로드 시간 | BOADEVENTEND -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 변수를 통해 나를 식별하는 데 사용되는 쿠키를 전달할 수 있으며 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/메모리 부하가 크게 영향을 받고 때로는 최적화 된 프로젝트가 최적화 전보다 느립니다.
도구가있는 경우, 웹 페이지를 여러 번 요청한 다음 다양한 성능 지표 평균을 취하는 경우 최적화가 긍정적이거나 부정적이라는 것을 매우 정확하게 알 수 있습니다.
또한 비교를하고 최적화 한 금액 에 대한 정확한 데이터를 얻을 수도 있습니다. 이 도구는 통증 지점을 해결하도록 설계되었습니다.
동시에이 도구는 "브라우저의 부하 및 렌더링 프로세스"및 "성능 최적화"에 대해 배울 수있는 좋은 도구입니다.
MIT
Welcome Star와 Pr
저작권 (C) 2018 Liyanfeng (pod4g)