🚀 자바스크립트 코드 실행 시간 측정 3가지 방법

console.time() 사용

자바스크립트에는 console.log() 외에도 여러가지 console 메소드들이 있다.

그중에 console.time() 과 console.timeEnd() 는 자바스크립트 코드 실행을 측정하는 함께 쌍을 이루는 함수이다.

console.time(); // 측정 시작

for (let i = 0, sum = 0; i < 100000; i++) {
    sum += i;
}

console.timeEnd(); // 측정 종료

1 밀리세컨드(ms) == 1s / 1000

 

만일 측정하고자 하는 코드 부분이 여러가지 이면, console.time() 의 매개변수로 문자열을 주면, 어떠한 코드를 측정했는지 네이밍을 지정해줄 수 있다.

console.time('반복문 한번 시간 측정'); // 측정 시작
console.time('반복문 두번 시간 측정'); // 측정 시작

for (let i = 0, sum = 0; i < 100000; i++) {
    sum += i;
}

console.timeEnd('반복문 한번 시간 측정'); // 첫번째 측정 종료

for (let i = 0, sum = 0; i < 100000; i++) {
    sum += i;
}

console.timeEnd('반복문 두번 시간 측정'); // 두번째 측정 종료

 

하지만 단점으로는 콘솔 상에서만 출력이 가능하고, 실행 시간 결과값을 받아와 화면에 띄우거나 데이터를 다루는 행위는 불가능 하다.

---

performance.now() 사용

브라우저의 window 객체에서 지원하는 performance.now()를 이용해 코드를 측정 할 수 있다.

performance.now() 가 반환하는 timestamp로 코드 실행 시간을 측정할 수 있는데, 브라우저마다timestamp 처리 방법이 다르기 때문에 정밀한 값을 얻는데는 한계가 있다.

const start = window.performance.now(); // 측정 시작

for (let i = 0, sum = 0; i < 100000; i++) {
    sum += i;
}

const end = window.performance.now(); // 측정 종료

const time = end - start;
console.log(`${time} ms`);

---

Date 객체 사용

자바스크립트 코드 실행 시간을 측정하는 정통적인 방법이다.

다만 상세한 밀리초 값을 얻을 수 없는 것이 흠이다.

const begin = new Date().getMilliseconds(); // 측정 시작

for (let i = 0, sum = 0; i < 100000; i++) {
    sum += i;
}

const end = new Date().getMilliseconds(); // 측정 종료

const time = end - begin;
console.log(`${time} ms`);