시간 측정 시 performance.now() 메소드를 사용해 고정밀 측정 결과를 얻을 수 있습니다.
이 메소드는 밀리초 단위로 현재 시간을 리턴하여 매우 정확한 시간 측정 작업이 가능합니다.
Table of Contents
함수 실행 시간 측정 예시
function test() {
for(let i = 0; i < 1000000000; i++);
}
const start = performance.now();
test();
const timeTaken = performance.now() - start;
console.log(`경과 시간: ${timeTaken}`);
개발자 도구를 통해 위의 코드를 실행하면 이미지와 같은 결과를 확인할 수 있습니다.
위의 예제 코드에서는 실행에 시간이 조금 걸리는 test() 함수를 먼저 작성했습니다.
다음으로 performance.now() 메소드를 통해 start 변수에 코드가 실행된 시간을 저장합니다.
그리고 시간이 조금 걸리는 test() 함수를 실행하고, 함수 실행이 끝나면 그 시점의 시간을 가져와 start 변수에 저장했던 시간과의 차이를 계산합니다.
이 결과를 console.log() 메소드를 사용하여 콘솔에 출력하면 함수의 실행 시간 측정이 완료됩니다.
비동기 작업 시간 측정
function asyncOperation() {
return new Promise(resolve => {
setTimeout(() => resolve(), 1000);
});
}
const start = performance.now();
await asyncOperation();
const end = performance.now();
console.log(`실행 시간: ${end - start}`);
비동기 작업의 경과시간을 측정하는 방법은 await을 사용한다는 점을 빼면 일반 함수의 시간을 측정하는 것과 동일합니다.
먼저 Promise와 setTimeout() 메소드를 통해 1초의 타이머를 실행하는 async 함수를 만듭니다.
그 후 기준이 될 start 변수에 현재 시간을 저장합니다.
시작 시간을 정했으니 await 키워드를 사용해 비동기 함수의 실행을 기다리게 합니다.
함수의 실행이 끝나면 end 변수에 시간을 저장하고 시작 시간과 끝 시간의 차이를 콘솔에 출력하면 비동기 함수의 실행 시간을 계산할 수 있습니다.
performance.now()의 특징
- 정밀도: performance.now() 메소드는 브라우저 환경에서 고해상도 타이머를 제공하기 때문에 Date.now() 메소드 보다 훨씬 정밀한 시간을 측정할 수 있습니다.
- 상대적인 시간: 이 메소드의 리턴 값은 절대적인 timestamp가 아닌 페이지 로드나 스크립트 실행 시작 시점으로부터의 경과 시간입니다.
- 밀리초 이상의 정밀도: 최대 마이크로초 정밀도의 소수점 숫자를 리턴합니다.
시간 측정 시 주요 장점
- 정밀한 측정: 성능 분석을 위해 이 메소드를 사용하면 더 세밀한 시간 측정 결과를 얻을 수 있으므로 지연시간 계산이나 성능 최적화를 위해 유용하게 사용할 수 있습니다.
- 높은 정확도: Date.now() 메소드는 시스템 시간에 의존하기 때문에 정확도가 떨어질 수 있지만 performance.now() 메소드는 타이머를 활용해 매우 정확한 시간 정보를 제공합니다.
유의 사항
이 메소드의 리턴 값은 페이지가 새로고침되면 초기화되며, 페이지의 로딩 시간을 기준으로 상대적인 값을 리턴합니다.
브라우저마다 구현이 조금 다를 수는 있지만 대부분의 모던 브라우저에서는 매우 높은 정밀도의 타이머를 제공합니다.