[JS] console.time(), console.timeEnd()로 작업 시간을 측정하는 방법

개발을 하다 보면 어떤 작업에 소요되는 시간을 측정해야 할 경우가 있습니다. 특정 부분 함수의 속도를 최적화한다거나, 아니면 과제 보고서 등을 작성할 때 어떤 작업의 개선 효과 등을 기록하기 위해서 필요한 경우가 있습니다.

 

개선이 된 것처럼 보여야 하니까 일단 뭐라도 나와야...

 

Date() 함수를 이용하여 시간차를 구해도 되지만, 그보다는 console의 메서드로 제공되는 console.time()과 console.timeEnd()를 이용하는 것이 더 간편합니다.

 

이번 글에서는 console의 time()을 이용하여 작업 시간을 측정하는 방법에 대해서 알아보겠습니다.

 

 

 

1. console.time() / console.timeEnd()

• 주어진 이름의 타이머를 실행/종료합니다.
• 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.
• console.timeEnd()를 호출할 때, 브라우저가 msec 단위로 경과한 시간을 출력합니다.

[문법]

// timer 시작
console.time(label)

//.... 작업 구간 ....

// timer 종료
console.timeEnd(label)

 

Parameter	Description
label	타이머의 이름 console.time과 console.timeEnd가 하나의 세트로 동작 label 미 지정시 'default'라는 이름으로 동작함

 

[사용방법]

사실 사용방법은 너무 간단해서 딱히 설명할 것은 없습니다.

 

□ 타이머를 시작하려는 부분에 console.time()을 넣어주면 됩니다. 괄호 안에 적당한 이름의 label을 설정하고 메서드를 호출하면 시작됩니다.

 

□ 작업이 종료되는 부분에서 타이머를 멈추고, 작업 시간을 출력하기 위해서는 console.timeEnd() 메서드를 호출하면 됩니다. 이때 작업 시간 측정을 위한 두 타이머의 label은 동일해야 합니다.

 

[예제 1] 기본 예제

아래 예제를 볼까요?

1부터 1억까지 더하는데 시간이 얼마나 걸리는지 측정하는 예제입니다.

 

console.log("1부터 1억까지 더하면?\n\n")

// Timer 시작
console.time("계산시간은 얼마나 걸릴까?");
let sum = 0;
for (let i=1; i<=1e8; i++) {
  sum += i;
}
console.log(`결과: ${sum} \n\n`);

// Timer 종료
console.timeEnd("계산시간은 얼마나 걸릴까?"); 

 

위 예제는 복사해서 개발자 모드의 콘솔창에 붙여 넣으면 바로 결과를 확인할 수 있습니다.

 

결과는 다음과 같습니다. 제 PC가 워낙 구닥다리라서... 아마 보통은 아래보다는 속도가 더 빨리 나올 것 같습니다.

 

 

앞에 Label 이름이 출력되고 뒤에 time과 timeEnd 사이에 걸린 시간이 ms 단위로 출력됩니다. 여기서 Label은 "계산시간은 얼마나 걸릴까?"인데요, 한글과 공백을 사용해도 잘 나오고 있습니다.

 

[예제 2] 여러 개의 label 적용

작업 구간을 세분화 시켜 측정해야 할 필요가 있을 수도 있겠죠? 여러 개의 label을 사용하면 어떻게 될까요? 아래 예제는 2개의 label을 설정한 경우입니다.

 

console.time("timer1");
console.time("timer2");
let sum = 0;
for (let i=1; i<=1e8; i++) {
  sum += i;
}
// Timer1 종료
console.timeEnd("timer1"); 

sum = 0;
for (let i=1; i<=1e8; i++) {
  sum += i;
}
//Timer2 종료
console.timeEnd("timer2"); 

 

timer1과 timer2는 동시에 시작합니다만, timer2는 1억까지 더하는 루틴을 한번 더 돌고 난 후에 종료됩니다. 이 예제의 결과는 다음과 같습니다.

 

 

잘 측정되는 것 같죠? 이와 같이 여러개의 label을 이용하여 단계별로 시간을 측정할 수도 있습니다. 긴 작업의 중간중간 시간을 체크할 때 매우 유용하겠습니다.

 

[예제 3] Label을 설정하지 않으면?

만약 Label을 설정하지 않으면 어떻게 될까요?

 

console.time();
let sum = 0;
for (let i=1; i<=1e8; i++) {
  sum += i;
}
console.timeEnd(); 

 

Label에 값을 설정하지 않고 공란으로 두는 경우에는 "default"라는 이름으로 label이 설정됩니다. 따라서 아래와 같은 결과가 나오게 됩니다.

 

[예제 4] Label이 다르면?

console.time과 timeEnd의 Label을 다르게 설정하면 어떻게 될까요?

 

console.time("timer1");
let sum = 0;
for (let i=1; i<=1e8; i++) {
  sum += i;
}
console.timeEnd("timer2"); 

 

당연한 결과이겠지만, 아래와 같이 timeEnd의 label인 "timer2"가 존재하지 않는다고 나옵니다.

 

 

맺음말

이번 글에서는 console의 time 메서드에 대해서 알아보았습니다. console.time()은 아주 정확한 시간 측정 방법은 아니겠지만, 특정 작업의 상대적인 개선 정도를 파악하는 데 있어서 매우 유용하고 편리한 방법인 듯합니다.