javascript에서 함수 실행시간 측정 방법

많이 쓰는건 2가지로 보면 된다.

console.time

쓰는 방법은 아래와 같다.

var selector = "f1"
console.time(selector);
f1();
console.timeEnd(selector); 
f1: 0.024ms

함수의 아래와 끝에 time과 timeEnd를 써주면 실행시간이 나온다.

console.time은 non-standard이다.

MDN에 보면

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

이렇게 정의하고 있다.

그래서 개발자 도구나 디버깅레벨에서 측정할 때만 사용해야 한다.

performance.now

window의 performance객체를 활용하는 방법이다.

사용방법은 비슷하다. 함수의 앞과 끝에서 performance.now를 실행해서 빼준다.

var t0 = performance.now();
f1();
var t1 = performance.now();
console.log("f1: " + (t1 - t0) + 'ms')
f1: 0.004999999655410647ms

DOMHighResTimeStamp를 반환해주는데 one thousandth of a millisecond까지 정확도를 갖고 있다. console.time보다 쓰기는 약간 불편해도 훨씬 정밀하다. 정확도에서도 우수하다.

console.time과 다르게 표준이다.

DOMHighResTimeStamp라는건 시스템 clock과 상관없이 메인 컨텍스트를 기준으로 측정된다. 그래서 브라우저마다 다른 값이 나오는 걸 볼 수 있다. (TimeStamp를 반환하는 Date.now와 다르다)
워커에서는 약간 다른방식으로 동작하는데 worker의 경우 window컨택스트보다 값이 낮고 서비스워커의 경우는 window가 생성된 후에 실행되 더 높다고 한다.

뭐든간에 parent context의 영향을 받는 것 때문에 크롬 45.0 (45.0)부터는 worker도 독립적인 context를 가진다.

정리

  • Date.now()로 측정하는게 나쁘지는 않지만 정확도면에서 위의 2개를 쓰는게 좋다. (단 Dom이 없는 노드의 경우는 이걸..)
  • 각 측정마다 이름을 먹일 수 있고 사용성면에서는 console.time이지만 이왕이면 표준인 performance.now를 쓰는게 좋을 것 같다.
  • 모든 브라우저 지원이 아니니 아래 MDN링크를 참조할 것

참고

https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
https://developer.mozilla.org/en-US/docs/Web/API/Console/time
http://ourcodeworld.com/articles/read/144/measuring-the-performance-of-a-function-with-javascript-using-browser-tools-or-creating-your-own-benchmark

Comments

comments powered by Disqus
comments powered by Disqus