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

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

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

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

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

답변

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')

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

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

<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>