JavaScript 코드 성능을 어떻게 테스트합니까?

CPU 사이클, 메모리 사용량, 실행 시간 등?

추가 : 코드 실행 속도에 대한 인식 외에도 JavaScript에서 성능을 테스트하는 양적 방법이 있습니까?

프로파일 러는 확실히 숫자를 얻는 좋은 방법이지만, 내 경험상 인식 된 성능은 사용자 / 클라이언트에게 중요한 것입니다. 예를 들어, Ext 아코디언을 사용하여 일부 데이터를 보여주고 몇 개의 중첩 Ext 그리드를 보여주는 프로젝트가있었습니다. 모든 것이 실제로 매우 빠르게 렌더링되었고, 단일 작업에 오랜 시간이 걸리지 않았으며, 한 번에 많은 정보가 렌더링되어 사용자에게 느려졌습니다.

더 빠른 구성 요소로 전환하거나 일부 방법을 최적화하는 것이 아니라 데이터를 먼저 렌더링 한 다음 setTimeout을 사용하여 그리드를 렌더링하여이를 수정했습니다. 정보가 먼저 나타난 다음 격자가 잠시 후에 나타납니다. 전체적으로 처리 시간이 약간 더 걸렸지 만 사용자에게는 인식 된 성능이 향상되었습니다.

요즘은 크롬 프로파일 및 기타 도구는 사용이 보편적으로 이용 가능하고 쉽게되어 console.time(), console.profile()및 performance.now(). 또한 Chrome은 타임 라인보기를 제공하여 프레임 속도를 저하시키는 원인, 사용자가 대기중인 위치 등을 보여줍니다.

이러한 모든 도구에 대한 문서를 찾는 것은 정말 쉽습니다. SO 답변이 필요하지 않습니다. 7 년 후에도 여전히 원래의 대답에 대한 조언을 반복하고 사용자가 알지 못하는 곳에서 영원히 느린 코드를 실행할 수 있으며, 그들이하는 곳에서 매우 빠른 코드를 실행할 수 있으며 꽤 빠른 코드는 충분히 빠르지 않습니다. 또는 서버 API 요청에 220ms가 걸렸습니다. 아니면 다른 것. 요점은 프로파일 러를 꺼내서 할 일을 찾으면 찾을 수 있지만 사용자에게 필요한 작업이 아닐 수도 있습니다.

나는 인식 된 성능이 정말로 중요하다는 것에 동의합니다. 그러나 때로는 어떤 방법을 사용하는 것이 더 빠른지 알고 싶습니다. 때로는 그 차이가 거대하고 알만한 가치가 있습니다.

당신은 자바 스크립트 타이머를 사용할 수 있습니다. 하지만 일반적으로 훨씬 더 일관성 (이제 파이어 폭스와 사파리에서) 기본 크롬을 사용하여 결과 devTool 방법 얻을 console.time()&를console.timeEnd()

사용 방법의 예 :

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

업데이트 (2016 년 4 월 4 일) :

Chrome 카나리아는 최근에 각 라인을 실행하는 데 걸린 시간을 정확히 확인할 수있는 개발 도구 소스 탭을 라인 레벨 프로파일 링 에 추가했습니다 !

우리는 항상 간단한 날짜 객체로 모든 함수에 걸리는 시간을 측정 할 수 있습니다 .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

jsPerf를 시도 하십시오 . 코드 스 니펫을 벤치마킹하고 비교하기위한 온라인 자바 스크립트 성능 도구입니다. 나는 항상 그것을 사용합니다.

현재 대부분의 브라우저는에서 고해상도 타이밍을 구현하고 performance.now()있습니다. new Date()시스템 클럭과 독립적으로 작동하기 때문에 성능 테스트 보다 우수합니다 .

용법

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

참고 문헌

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus 는 임시 JavaScript 벤치 마크 테스트를 작성하기위한 간단한 도구입니다.

function expression와 사이의 성능을 살펴 보겠습니다 function constructor.

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

위에서 한 것은 동일한 작업을 수행 function expression하고 function constructor수행하는 것입니다. 결과는 다음과 같습니다.

FireFox 성능 결과

IE 성능 결과

일부 사람들은 특정 플러그인 및 / 또는 브라우저를 제안합니다. 나는 그들이 하나의 플랫폼 에만 실제로 유용 하기 때문이 아닙니다 . Firefox에서 테스트를 실행하면 IE7로 정확하게 변환되지 않습니다. 99.999999 %의 사이트가 둘 이상의 브라우저를 방문한다고 가정 하면 모든 인기있는 플랫폼에서 성능을 확인해야합니다.

내 제안은 이것을 JS에 보관하는 것입니다. 모든 JS 테스트 및 실행 시간을 기준으로 벤치마킹 페이지를 만듭니다. 결과를 AJAX 게시하여 다시 자동화되도록 할 수도 있습니다.

그런 다음 다른 플랫폼을 헹구고 반복하십시오.

브라우저에서 작은 테스트 사례를 빠르게 실행하고 결과를 즉시 얻을 수있는 작은 도구가 있습니다.

자바 스크립트 속도 테스트

코드를 사용하여 테스트 한 브라우저에서 어떤 기술이 더 나은지 알 수 있습니다.

JavaScript 성능 (시간) 테스트는 충분하다고 생각합니다. JavaScript 성능 테스트 에 대한 매우 유용한 기사를 여기 에서 찾았 습니다 .

전달 된 함수의 실행 시간을 표시하는 간단한 함수는 다음과 같습니다.

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

당신은이를 사용할 수 있습니다 http://getfirebug.com/js.html를 . JavaScript 용 프로파일 러가 있습니다.

빠른 답변

(더 구체적으로 지글 지글)에 jQuery를, 우리는 사용 이 (체크 아웃 마스터와 개방 속도 브라우저에 / index.html을) 차례로 사용의 benchmark.js을 . 라이브러리 성능 테스트에 사용됩니다.

긴 대답

독자가 벤치 마크, 워크로드 및 프로파일 러의 차이점을 모른다면 먼저 spec.org 의 "readme 1st"섹션 에서 성능 테스트 기초를 읽으십시오 . 이는 시스템 테스트를위한 것이지만이 기초를 이해하면 JS 성능 테스트에도 도움이됩니다. 일부 주요 특징 :

벤치 마크 란 무엇입니까?

벤치 마크는 "측정 또는 평가 표준"(Webster 's II Dictionary)입니다. 컴퓨터 벤치 마크는 일반적으로 엄격하게 정의 된 작업 집합 (워크로드)을 수행하고 테스트 된 컴퓨터의 성능을 나타내는 메트릭 (결과)을 반환하는 컴퓨터 프로그램입니다. 컴퓨터 벤치 마크 지표는 일반적으로 속도를 측정합니다. 또는 처리량 : 단위 시간당 완료된 작업 단위 수. 여러 컴퓨터에서 동일한 컴퓨터 벤치 마크를 실행하면 비교할 수 있습니다.

내 응용 프로그램을 벤치마킹해야합니까?

이상적으로 시스템에 대한 최상의 비교 테스트는 자체 작업 부하가있는 자체 응용 프로그램입니다. 불행히도, 자체 워크로드가있는 자체 응용 프로그램을 사용하여 다른 시스템에 대해 신뢰할 수 있고 반복 가능하며 비교 가능한 광범위한 측정 기준을 얻는 것은 종종 비현실적입니다. 문제에는 좋은 테스트 사례 생성, 기밀 유지 문제, 비슷한 조건, 시간, 비용 또는 기타 제약 조건 확보에 어려움이있을 수 있습니다.

내 자신의 응용 프로그램이 아닌 경우 어떻게해야합니까?

표준화 된 벤치 마크를 참조 지점으로 사용하는 것이 좋습니다. 이상적으로 표준화 된 벤치 마크는 이식 가능하며 이미 관심있는 플랫폼에서 이미 실행되었을 수 있습니다. 그러나 결과를 고려하기 전에 응용 프로그램 / 컴퓨팅 요구 사항과 벤치 마크가 측정됩니다. 벤치 마크는 실행하는 응용 프로그램 종류와 비슷합니까? 작업 부하의 특성이 비슷합니까? 이러한 질문에 대한 답변을 바탕으로 벤치 마크가 현실과 어떻게 비슷한 지 알 수 있습니다.

참고 : 표준화 된 벤치 마크는 참조 지점으로 사용할 수 있습니다. 그럼에도 불구하고 공급 업체 또는 제품 선택을 수행 할 때 SPEC은 표준화 된 벤치 마크가 실제 응용 프로그램 벤치마킹을 대체 할 수 있다고 주장하지 않습니다.

성능 테스트 JS

가장 좋은 성능 테스트는 다른 라이브러리, 머신 등 테스트해야 할 작업을 전환하는 자체 워크로드와 함께 자체 애플리케이션을 사용하는 것입니다.

이것이 가능하지 않은 경우 (보통 그렇지 않은 경우) 첫 번째 중요한 단계 : 작업 부하를 정의하십시오. 애플리케이션의 워크로드를 반영해야합니다. 에서 이 이야기 , 뱌체슬라프 에고 로프는 피해야한다 엿 같은 워크로드에 대해 이야기합니다.

그런 다음 벤치 마크 .js와 같은 도구를 사용하여 메트릭 (일반적으로 속도 또는 처리량)을 수집 할 수 있습니다. Sizzle에서는 수정 또는 변경이 라이브러리의 시스템 성능에 어떤 영향을 미치는지 비교하는 데 관심이 있습니다.

무언가가 실제로 좋지 않은 경우 다음 단계는 병목 현상을 찾는 것입니다.

병목 현상을 어떻게 찾습니까? 프로파일 러

자바 스크립트 실행을 프로파일 링하는 가장 좋은 방법은 무엇입니까?

실행 시간이 가장 좋은 방법이라고 생각합니다.

firebug에서 console.profile 을 사용할 수 있습니다

나는 보통 자바 스크립트 성능, 스크립트 실행 시간을 테스트합니다. jQuery Lover는 자바 스크립트 코드 성능 을 테스트하기위한 훌륭한 기사 링크를 제공 했지만이 기사에서는 자바 스크립트 코드 실행 시간을 테스트하는 방법 만 보여줍니다. 또한 " 거대한 데이터 세트로 작업하는 동안 jQuery 코드 를 개선하는 5 가지 팁"이라는 기사를 읽는 것이 좋습니다 .

다음은 시간 성능에 재사용 가능한 클래스입니다. 코드에 예제가 포함되어 있습니다.

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX 프로파일 러 는 사용자 관점에서이 문제에 접근합니다. 일부 사용자 동작 (클릭)으로 인한 모든 브라우저 이벤트, 네트워크 활동 등을 그룹화하고 대기 시간, 시간 초과 등과 같은 모든 측면을 고려합니다.

나는 비슷한 것을 찾고 있었지만 이것을 발견했다.

https://jsbench.me/

측면 간 비교가 가능하며 결과를 공유 할 수도 있습니다.

황금률은 어떤 상황에서도 사용자 브라우저를 잠그지 않는 것입니다. 그 후, 나는 보통 실행 시간을보고 메모리 사용량을 봅니다 (당신이 미친 짓을하지 않는 한, 더 높은 우선 순위가 될 수 있습니다).

성능 테스트는 최근에 유행어가되었지만 성능 테스트가 QA에서 중요한 프로세스가 아니거나 제품이 출시 된 후에도 중요하지 않다는 것은 아닙니다. 그리고 응용 프로그램을 개발하는 동안 많은 다른 도구를 사용하지만 크롬 프로파일 러 와 같이 위에서 언급 한 도구 중 일부는 일반적으로 SaaS 또는 오픈 소스를보고 무언가가 배가났다는 경고를 얻을 때까지 잊어 버릴 수 있습니다. .

몇 가지 기본 알림을 설정하기 위해 농구대를 뛰어 넘지 않고도 성능을 주시하는 데 도움이되는 멋진 도구가 많이 있습니다. 다음은 스스로 확인할 가치가 있다고 생각되는 몇 가지입니다.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

보다 선명한 그림을 그려 보려면 반응 응용 프로그램에 대한 모니터링을 설정하는 방법에 대한 약간의 자습서가 있습니다.

이는 특정 작업에 대한 성능 정보를 수집하는 좋은 방법입니다.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);