console.timeEnd() 메서드는 console.time()으로 시작된 타이머를 멈추고, 두 메서드 사이에서 실행된 코드가 완료되기까지 걸린 시간을 콘솔에 표시하는 데 사용됩니다. 코드의 특정 구간이 실행되는 데 얼마나 걸리는지 측정하여 성능 병목 지점을 파악할 때 매우 유용합니다.
또한 선택적인 label(레이블) 매개변수를 사용하면 여러 개의 타이머 중 어떤 타이머를 종료할지 지정할 수 있습니다.
문법(Syntax)
console.timeEnd() 메서드의 기본 문법은 다음과 같습니다.
console.timeEnd(label);
여기서 label은 종료할 타이머를 지정하는 선택적 매개변수입니다.
예제
다음은 console.timeEnd() 메서드를 활용한 예제입니다. for 루프, while 루프, do-while 루프 각각 10만 번의 반복 실행 시간을 측정합니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.time() Method</h1>
<p>아래 버튼을 클릭하면 for, while, do-while 루프가 각각 100000번 반복되는 시간을 측정합니다</p>
<button type="button" onclick="LoopPerform()">TIMER</button>
<script>
var i,j,k;
i=0,j=0,k=0;
function LoopPerform(){
console.time("for-loop");
for (; i < 100000; i++){}
console.timeEnd("for-loop");
console.time("while-loop");
while(j<100000)
j++;
console.timeEnd("while-loop");
console.time("do-while loop");
do{k++;}
while(k<100000);
console.timeEnd("do-while loop");
}
</script>
<p>F12 키를 눌러 콘솔 화면에서 성능 측정 결과를 확인하세요</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
TIMER 버튼을 클릭하면 콘솔에 아래와 같이 각 루프의 실행 시간이 출력됩니다.
코드 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
1. TIMER 버튼 생성
사용자가 클릭하면 LoopPerform() 함수를 실행하는 버튼을 먼저 만듭니다.
<button type="button" onclick="LoopPerform()">TIMER</button>
2. 세 가지 루프와 타이머
LoopPerform() 함수 내부에는 for 루프, while 루프, do-while 루프가 포함되어 있습니다. 각 루프의 성능을 측정하기 위해 “for-loop”, “while-loop”, “do-while loop”라는 세 개의 레이블을 가진 타이머를 생성했습니다.
3. 타이머 시작과 종료
console.time() 메서드는 타이머를 시작하며, 선택적으로 레이블 매개변수를 받아 해당 코드가 실행되는 동안 경과된 시간을 측정합니다. 이후 console.timeEnd() 메서드가 타이머를 종료하고 콘솔 화면에 결과를 표시합니다.
timeEnd() 메서드에 레이블을 매개변수로 전달하면, 여러 타이머 중 어떤 것을 종료할지 정확하게 지정할 수 있습니다.
function LoopPerform(){
console.time("for-loop");
for (; i < 100000; i++){}
console.timeEnd("for-loop");
console.time("while-loop");
while(j<100000)
j++;
console.timeEnd("while-loop");
console.time("do-while loop");
do{k++;}
while(k<100000);
console.timeEnd("do-while loop");
}
정리
console.timeEnd() 메서드는 console.time()과 함께 사용하여 코드 실행 시간을 손쉽게 측정할 수 있는 강력한 디버깅 도구입니다. 레이블을 활용하면 동시에 여러 구간의 성능을 독립적으로 측정할 수 있어, 애플리케이션의 병목 지점을 찾고 최적화하는 데 큰 도움이 됩니다.