Javascript 실행 시간 측정하기

콘솔을 활용해 ASCII 아트를 찍어보는 실습을 해보던 중..

이스케이프 문자를 활용해보고 다양한 console.error와 같은 출력방식을 접해보는 것만 생각하고 자신있게 시작했다가 예상치 못한 난관에 마주쳤다.

바로... 시간 측정!!

 

처음 시도했던 방법

let start = new Date();

console.log("  /\\_____\n",
            " (      @ \\___\n",
            "  /           0\n",
            " /       (_____/\n",
            " /________/  U");

let end = new Date();
console.log("이것은 간단한 ASCII 아트 강아지입니다.");
console.warn("주의: 이 강아지는 그림입니다. 실제 강아지가 아닙니다.");
console.error("오류: 실제 강아지 데이터를 불러오지 못했습니다.");

let time = end - start;
console.log(`그리는 데 걸린 시간: ${time}`);

시작한 시간과 끝난 시간을 받아와 둘의 차이를 구하면 되겠다 싶었지만 예제와 달리 똑 떨어지는 숫자에 시간을 측정하는 방법들을 제대로 알아보기로 했다!

 

 

Javascript 프로그램의 실행 시간 측정

1. Date

Date 객체는 1970년 1월 1일 00:00 UTC와 호스트 시스템의 현지 시간의 시간차를 ms로 나타내는 정수값을 갖고 있다.

이를 기반으로 관련 데이터를 필요한 형태로 받아오거나, 설정할 수 있다.

 

1) 정적 메서드

- Date.now(): 1970년 1월 1일 00:00 UTC로부터 지난 시간을 ms 단위의 값으로 반환한다.

 

2) 인스턴스 메서드

- date라는 인스턴스를 가정할 때

- date.getDate(): 현지 시간 기준 일을 반환한다. (1~31)

- date.getMilliseconds(): 현지 시간 기준 ms를 반환한다. (0~999)

 

이외에도 다양한 메서드가 있다.

원하는 동작이 ms 단위의 비교이므로 관련 메소드의 출력값을 확인해보았다.

// 출력 전 시간 측정
let start = new Date();
console.log(`start: ${start}`);
console.log(`start.getMilliseconds(): ${start.getMilliseconds()}`);

let startNow = Date.now();
console.log(`start 시점의 Date.now(): ${startNow}`);

// 출력 후 시간 측정
let end = new Date();
console.log(`end: ${end}`);
console.log(`end.getMilliseconds(): ${end.getMilliseconds()}`);

let endNow = Date.now();
console.log(`end 시점의 Date.now(): ${endNow}`);

 

 

소수점 아래 단위까지의 정밀한 비교에는 적합하지 않아보인다.

 

 

2. console.time()

console의 메서드로, 경과한 시간을 측정할 수 있는 타이머다.

타이머의 별칭을 인자로 넘겨주면 동시에 여러개의 타이머를 실행시킬 수 있다.

 

console.time();
console.time("또다른 타이머");
console.time("그리는 데 걸린 시간");

console.log("  /\\_____\n",
            " (      @ \\___\n",
            "  /           0\n",
            " /       (_____/\n",
            " /________/  U");
console.timeEnd("그리는 데 걸린 시간");
console.timeEnd();
console.timeEnd("또다른 타이머");

 

인자를 전달하지 않을 경우 default로 출력되며, 콘솔 출력만 필요할 때 간편하게 사용할 수 있다!

하지만 출력 외의 용도로 값을 사용해야할 경우 적합하지 않아보인다.

 

 

3. performance.now()

performance는 브라우저의 window 에서 성능 관련 데이터를 얻기위한 API 이다.

그중 performance.now()를 통해 페이지 로드 후 경과시간을 얻을 수 있으며, ms 미만의 값까지 제공하기에 값을 저장하고 활용해야하는 경우 이 방법이 적합해 보인다.

하지만 이는 브라우저마다 약간의 차이가 있어 정확한 값을 얻는 데에 한계가 있다고 한다.

 

let start = window.performance.now();

console.log("  /\\_____\n",
            " (      @ \\___\n",
            "  /           0\n",
            " /       (_____/\n",
            " /________/  U");

let end = window.performance.now();

let time = end - start;
console.log(`그리는 데 걸린 시간: ${time}`);