[javascript] 함수가 실행하는 데 걸리는 시간을 측정하는 방법

로컬 개발 시스템에서 함수 실행 시간을 가져와야하는 경우 브라우저의 프로파일 링 도구 또는 console.time()및과 같은 콘솔 명령을 사용할 수 있습니다 console.timeEnd().

모든 최신 브라우저에는 JavaScript 프로파일 러가 내장되어 있습니다. 이러한 프로파일 러는 기존 코드를 수정할 필요가 없으므로 가장 정확한 측정 값을 제공해야합니다. 이는 기능의 실행 시간에 영향을 줄 수 있습니다.

JavaScript를 프로파일 링하려면 :

• 에서 크롬 키를 눌러 F12 선택 프로파일 탭, 다음 수집 자바 스크립트 CPU 프로필 .
• 에서 파이어 폭스 , 오픈 / 방화범을 설치하고 클릭 프로필 버튼을 클릭합니다.
• 에서 IE 9+ 키를 눌러 F12 , 클릭 스크립트 또는 프로파일 (IE 버전에 따라).

또한, 개발 시스템에 , 당신은 당신과 코드에 장비를 추가 할 수 있습니다 console.time()와 console.timeEnd(). Firefox11 +, Chrome2 + 및 IE11 +에서 지원되는이 기능은을 통해 시작 / 중지하는 타이머를보고합니다 console.time(). time()사용자 정의 타이머 이름을 인수로 사용하고 timeEnd()타이머가 시작된 이후 실행 시간을보고합니다.

function a() {
  console.time("mytimer");
  ... do stuff ...
  var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}

Firefox에서만 timeEnd()통화 경과 시간을 반환합니다 . 다른 브라우저는 단순히 결과를 개발자 콘솔에보고합니다. 반환 값 timeEnd()은 정의되어 있지 않습니다.

wild에서 함수 실행 시간을 얻으 려면 코드를 계측해야합니다. 몇 가지 옵션이 있습니다. 다음을 쿼리하여 시작 및 종료 시간을 간단히 저장할 수 있습니다 new Date().getTime().

function a() {
  var start = new Date().getTime();
  ... do stuff ...
  var end = new Date().getTime();
  var dur = end - start;
}

그러나 Date개체의 해상도는 밀리 초이며 OS의 시스템 시계 변경에 영향을받습니다. 최신 브라우저에는 더 나은 옵션이 있습니다.

더 나은 옵션은 일명 고해상도 시간 을 사용하는 것 window.performance.now()입니다. 두 가지 중요한 방식으로 now()기존보다 낫습니다 Date.getTime().

1. now()페이지 탐색이 시작된 이후 밀리 초 수를 나타내는 밀리 초 미만의 해상도를 가진 double입니다. 분수 단위의 마이크로 초 수를 반환합니다 (예 : 1000.123은 1 초, 123 마이크로 초).

2. now()단조롭게 증가하고 있습니다. 이것은 중요하다 Date.getTime()할 가능성이 후속 호출에 뒤로 앞으로 또는 이동. 특히 OS의 시스템 시간이 업데이트되면 (예 : 원자 시계 동기화) Date.getTime()업데이트됩니다. now()항상 단조 증가하는 것을 보장하므로 OS의 시스템 시간에 영향을받지 않습니다-항상 벽시계 시간입니다 (벽시계가 원자가 아니라고 가정).

now()거의 모든 곳에서 사용할 수 있습니다 new Date().getTime(), + new Dateandt Date.now()있습니다. 단 , 유닉스 시대 (1970 년 이후의 밀리 초 수)를 기반으로하는 것처럼 시간 Date과 now()시간이 혼합되지 않는 반면 페이지 탐색이 시작된 이후의 시간 (밀리 초)은 훨씬 좁습니다 .Datenow()Date

사용 방법의 예는 다음과 같습니다 now().

function a() {
  var start = window.performance.now();
   ... do stuff ...
  var end = window.performance.now();
  var dur = end - start;
}

now()Chrome 안정, Firefox 15 이상 및 IE10에서 지원됩니다. 사용 가능한 여러 폴리 필도 있습니다.

야생에서 실행 시간을 측정하기위한 다른 옵션은 UserTiming 입니다. UserTiming은 console.time()and와 비슷하게 작동 console.timeEnd()하지만 사용하는 것과 동일한 고해상도 타임 스탬프를 now()사용하므로 (1 밀리 초 미만의 단조 증가하는 클럭을 얻음) 타임 스탬프와 지속 시간을 PerformanceTimeline에 저장합니다 .

UserTiming에는 마크 (타임 스탬프)와 측정 ( 두께)의 개념이 있습니다. 원하는만큼 정의 할 수 있으며 PerformanceTimeline에 노출됩니다 .

타임 스탬프를 저장하려면을 호출하십시오 mark(startMarkName). 첫 마크 이후의 기간을 얻으려면을 호출하면 measure(measurename, startMarkname)됩니다. 그런 다음 기간이 마크와 함께 PerformanceTimeline에 저장됩니다.

function a() {
  window.performance.mark("start");
  ... do stuff ...
  window.performance.measure("myfunctionduration", "start");
}

// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];

UserTiming은 IE10 + 및 Chrome25 +에서 사용할 수 있습니다. 내가 쓸 수 있는 polyfill도 있습니다.

답변

var performance = window.performance;
var t0 = performance.now();
doWork();
var t1 = performance.now();
console.log("Call to doWork took " + (t1 - t0) + " milliseconds.")

var StopWatch = function (performance) {
    this.startTime = 0;
    this.stopTime = 0;
    this.running = false;
    this.performance = performance === false ? false : !!window.performance;
};

StopWatch.prototype.currentTime = function () {
    return this.performance ? window.performance.now() : new Date().getTime();
};

StopWatch.prototype.start = function () {
    this.startTime = this.currentTime();
    this.running = true;
};

StopWatch.prototype.stop = function () {
    this.stopTime = this.currentTime();
    this.running = false;
};

StopWatch.prototype.getElapsedMilliseconds = function () {
    if (this.running) {
        this.stopTime = this.currentTime();
    }

    return this.stopTime - this.startTime;
};

StopWatch.prototype.getElapsedSeconds = function () {
    return this.getElapsedMilliseconds() / 1000;
};

StopWatch.prototype.printElapsed = function (name) {
    var currentName = name || 'Elapsed:';

    console.log(currentName, '[' + this.getElapsedMilliseconds() + 'ms]', '[' + this.getElapsedSeconds() + 's]');
};

var stopwatch = new StopWatch();
stopwatch.start();

for (var index = 0; index < 100; index++) {
    stopwatch.printElapsed('Instance[' + index + ']');
}

stopwatch.stop();

stopwatch.printElapsed();

Instance[0] [0ms] [0s]
Instance[1] [2.999999967869371ms] [0.002999999967869371s]
Instance[2] [2.999999967869371ms] [0.002999999967869371s]
/* ... */
Instance[99] [10.999999998603016ms] [0.010999999998603016s]
Elapsed: [10.999999998603016ms] [0.010999999998603016s]