Javascript & Typescript/이해하기

[JS] 함수 실행시간 측정 방법

adjh54 2022. 4. 10. 17:08
728x170
해당 글은 Javascript 내에서 함수의 실행시간을 측정하는 방법들을 설명하는 글입니다.

 

1) Date()를 이용한 측정방식


💡 해당 방식은 함수 시작전에 도출한 new Date() 값과 함수 종료후에 도출한 new Date() 값을 이용하여 두개의 차이를 계산하여 함수 수행속도를 측정하는 방식입니다. 해당 방식은 '밀리초(ms)' 단위로 경과한 시간을 반환해 줍니다.
const fn_methodDate = () => {

    let sum: number = 0;
    let loopCnt: number = 10000000; // 루프 수행 횟수
    const _startTime: number = new Date().getTime(); // 시작시간

    for (let i = 0; i < loopCnt; i++) {
        sum += i
    }
    const _endTime: number = new Date().getTime(); // 종료시간 
    console.log(`Result Time :  ${_endTime - _startTime} ms`);
}
[참고] Date() API: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
 

Date.prototype.getTime() - JavaScript | MDN

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.

developer.mozilla.org

 

2) console.time() / console.timeEnd()를 이용한 측정방식


💡 해당 방식은 console.time() / console.timeEnd() 함수를 이용하여서 함수를 측정합니다.
서로간의 동일한 '라벨'을 체크해서 console.time() 시작점 부터 console.timeEnd() 종료점까지의 시간을 측정합니다.
해당 방식은 '밀리초(ms)' 단위로 경과한 시간을 반환해 줍니다.

 

[적용예시]
console.time("Performance Time")이라는 라벨을 사용하였습니다. 종료 시점의 시간을 확인해보려면 아래와 같이
console.endTime("Performance Time")이라는 라벨을 통해서 종료시점을 확인합니다.
const fn_methodConsole = () => {
    let sum: number = 0;
    let loopCnt: number = 10000000; // 루프 수행 횟수
    console.time("Performance Time"); // 시작시간

    for (let i = 0; i < loopCnt; i++) {
        sum += i
    }
	console.timeEnd('Performance Time'); // 해당 부분에서 콘솔로 값을 리턴 받는다.
}
[참고] console.time() API: https://developer.mozilla.org/ko/docs/Web/API/console/time
 

console.time() - Web API | MDN

console.time() 메서드는 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이

developer.mozilla.org

 

필자는 React Native를 통해서 해당 함수를 사용해 봤을때, 아래와 같이 에러가 발생하였습니다.
React-native는 이를 제공해주지 않는것으로 확인되었습니다. 관련 문서는 하단의 stackoverflow 링크에 있습니다.
[Unhandled promise rejection: TypeError: console.time is not a function. (In 'console.time("time")', 'console.time' is undefined)]
at src/components/studymange/StudyManageMainScreen.tsx:122:34 in fn_performanceConsole
at src/components/studymange/StudyManageMainScreen.tsx:122:34 in fn_performanceConsole
at src/components/studymange/StudyManageMainScreen.tsx:86:9 in <anonymous>
at src/components/studymange/StudyManageMainScreen.tsx:86:9 in <anonymous>
at src/components/studymange/StudyManageMainScreen.tsx:86:9 in <anonymous>
[참고] React-native 관련 Stackoverflow 글 How to time a function in React Native?
 

How to time a function in React Native?

This question suggests using console.time, but that isn't available in React Native. Is there a built in way to measure how long a function call takes, without using any third-party packages?

stackoverflow.com

 

 

3) performance.now()를 이용한 측정방식


💡 윈도우 내장함수로써 해당 함수를 실행시키면 ‘타임스탬프' 코드로 실행시간을 받으며, 밀리세컨드로 값을 반환 받는다.
해당 방식은 DOMHighResTimeStamp 타입의 '밀리초(ms)' 단위로 경과한 시간을 반환해 줍니다.
* 밀리초 단위로 주어진 시간은 5μs(마이크로초)까지 숫자의 소수 부분은 밀리초의 소수까지를 나타냅니다.
const fn_methodPerformance = () => {
    let sum: number = 0;
    let loopCnt: number = 10000000; // 루프 수행 횟수
    const _startTime: number = performance.now(); // 시작시간

    for (let i = 0; i < loopCnt; i++) {
        sum += i
    }
    const _endTime: number = performance.now(); // 종료시간 
    console.log(`Result Time :  ${_endTime - _startTime} ms`); // 최종 결과값 (ms)
}

 

[참고] performance.now() API: performance.now() - Web APIs | MDN
 

performance.now() - Web APIs | MDN

The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds.

developer.mozilla.org

 

[참고] DOMHighResTimeStamp : https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
 

DOMHighResTimeStamp - Web APIs | MDN

The DOMHighResTimeStamp type is a double and is used to store a time value in milliseconds.

developer.mozilla.org

 

오늘의 결론


제가 확인해 본 함수 실행시간 측정방법으로 3가지를 알아봤습니다.
이외에도 다양하고 정확하게 측정하는 방법이 존재 할것 같습니다. 읽고 계신분 중에 다른 측정방법이 있으면 댓글로 작성해주시면 감사합니다. 

 

오늘도 감사합니다😀

그리드형