HTML DOM의 console.time() 메서드는 특정 코드 블록이 실행되는 데 걸리는 시간을 콘솔에 표시하는 데 사용됩니다. 이를 활용하면 전체 코드 또는 코드의 일부 구간의 성능을 분석할 수 있으며, 실행 시간을 측정함으로써 코드를 더욱 효율적으로 최적화할 수 있습니다. 또한 선택적인 label(레이블) 매개변수를 사용하면 하나의 페이지에서 여러 개의 타이머를 동시에 운영할 수도 있습니다.
문법(Syntax)
HTML DOM console.time() 메서드의 기본 문법은 다음과 같습니다.
console.time(label)
여기서 label은 선택적 매개변수로, 타이머에 이름을 지정하는 역할을 합니다. 여러 타이머를 사용할 때 각각을 구분하기 위해 유용합니다.
예제
이제 console.time() 메서드의 실제 사용 예제를 살펴보겠습니다. 아래 예제는 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() 함수를 호출하는 TIMER 버튼을 만듭니다.
<button type="button" onclick="LoopPerform()">TIMER</button>
2. 세 가지 반복문과 타이머 설정
LoopPerform() 함수 내부에는 for, while, do-while 세 가지 반복문이 포함되어 있습니다. 각 반복문의 성능을 측정하기 위해 "for-loop", "while-loop", "do-while loop"라는 이름의 총 세 개의 타이머가 생성됩니다.
3. 시간 측정 과정
console.time() 메서드는 타이머를 시작하며, 선택적인 label 매개변수를 받아 해당 코드가 실행되는 동안 경과 시간을 카운트합니다. 측정하고자 하는 코드는 console.time()과 console.timeEnd() 메서드 사이에 위치시키면 되며, 코드 실행이 완료되는 데 걸린 시간은 콘솔 창에 밀리초(ms) 단위로 표시됩니다.
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.time() 메서드는 별도의 외부 라이브러리나 복잡한 프로파일링 도구 없이도 브라우저 콘솔만으로 코드 성능을 빠르게 진단할 수 있는 강력한 도구입니다. 반복문뿐만 아니라 API 호출, 데이터 처리 로직 등 다양한 코드 구간의 실행 시간을 측정하여 병목 지점을 파악하고 최적화하는 데 활용해 보시기 바랍니다.