How to measure time taken by a function to execute

How to measure time taken by a function to execute

I need to get execution time in milliseconds.

I originally asked this question back in 2008. The accepted answer
then was to use new Date().getTime() However, we can all agree now
that using the standard performance.now() API is more
appropriate. I am therefore changing the accepted answer to this one.

Solutions/Answers:

Solution 1:

Using performance.now():

var t0 = performance.now();

doSomething();   // <---- The function you're measuring time for 

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

NodeJs: it is required to import the performance class


Using console.time: (non-standard) (living standard)

console.time('someFunction');

someFunction(); // Whatever is timed goes between the two "console.time"

console.timeEnd('someFunction');

Note:

Solution 2:

use new Date().getTime()

The getTime() method returns the number of milliseconds since midnight of January 1, 1970.

ex.

var start = new Date().getTime();

for (i = 0; i < 50000; ++i) {
// do something
}

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

Solution 3:

Don’t use Date(). Read below.

Use performance.now():

<script>
var a = performance.now();
alert('do something...');
var b = performance.now();
alert('It took ' + (b - a) + ' ms.');
</script>

It works on:

  • IE 10 ++

  • FireFox 15 ++

  • Chrome 24 ++

  • Safari 8 ++

  • Opera 15 ++

  • Android 4.4 ++

  • etc, etc

console.time may be viable for you, but it’s 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.

Besides browser support, performance.now seems to have the potential to provide more accurate timings as it appears to be the bare-bones version of console.time.


<rant> Also, DON’T EVER use Date for anything because it’s affected by changes in “system time”. Which means we will get invalid results —like “negative timing”— when the user doesn’t have an accurate system time:

On Oct 2014, my system clock went haywire and guess what…. I opened Gmail and saw all of my day’s emails “sent 0 minutes ago“. And I’d thought Gmail is supposed to be built by world-class engineers from Google…….

(Set your system clock to one year ago and go to Gmail so we can all have a good laugh. Perhaps someday we will have a Hall of Shame for JS Date.)

Google Spreadsheet’s now() function also suffers from this problem.

The only time you’ll be using Date is when you want to show the user his system clock time. Not when you want to get the time or to measure anything.

Solution 4:

If you need to get function execution time on your local development machine, you can either use your browser’s profiling tools, or console commands such as console.time() and console.timeEnd().

All modern browsers have JavaScript profilers built-in. These profilers should give the most accurate measurement as you do not have to modify your existing code, which could affect the function’s execution time.

To profile your JavaScript:

  • In Chrome, press F12 and select the Profiles tab, then Collect JavaScript CPU Profile.
  • In Firefox, install/open Firebug, and click on the Profile button.
  • In IE 9+, press F12, click on Script or Profiler (depending on your version of IE).

Alternatively, on your development machine, you can add instrumentation to your code with console.time() and console.timeEnd(). These functions, supported in Firefox11+, Chrome2+ and IE11+, report on timers that you start/stop via console.time(). time() takes a user-defined timer name as an argument, and timeEnd() then reports on the execution time since the timer started:

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

Note that only Firefox returns the elapsed time in the timeEnd() call. The other browsers simply report the result to the developer console: the return value of timeEnd() is undefined.

If you want to get function execution time in the wild, you will have to instrument your code. You have a couple options. You can simply save the start and end times by querying new Date().getTime():

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

However, the Date object only has millisecond resolution and will be affected by any OS’s system clock changes. In modern browsers, there’s a better option.

The better option is to use the High Resolution Time, aka window.performance.now(). now() is better than the traditional Date.getTime() in two important ways:

  1. now() is a double with submillisecond resolution that represents the number of milliseconds since the start of the page’s navigation. It returns the number of microseconds in the fractional (e.g. a value of 1000.123 is 1 second and 123 microseconds).

  2. now() is monotonically increasing. This is important as Date.getTime() can possibly jump forward or even backward on subsequent calls. Notably, if the OS’s system time is updated (e.g. atomic clock synchronization), Date.getTime() is also updated. now() is guaranteed to always be monotonically increasing, so it is not affected by the OS’s system time — it will always be wall-clock time (assuming your wall clock is not atomic…).

now() can be used in almost every place that new Date().getTime(), + new Date andt Date.now() are. The exception is that Date and now() times don’t mix, as Date is based on unix-epoch (the number of milliseconds since 1970), while now() is the number of milliseconds since your page navigation started (so it will be much smaller than Date).

Here’s an example of how to use now():

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

now() is supported in Chrome stable, Firefox 15+, and IE10. There are also several polyfills available.

One other option for measuring execution time in the wild is UserTiming. UserTiming behaves similarly to console.time() and console.timeEnd(), but it utilizes the same High Resolution Timestamp that now() uses (so you get a sub-millisecond monotonically increasing clock), and saves the timestamps and durations to the PerformanceTimeline.

UserTiming has the concepts of marks (timestamps) and measures (durations). You can define as many of either as you want, and they’re exposed on the PerformanceTimeline.

To save a timestamp, you call mark(startMarkName). To get the duration since your first mark, you simply call measure(measurename, startMarkname). The duration is then saved in the PerformanceTimeline alongside your marks.

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

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

UserTiming is available in IE10+ and Chrome25+. There is also a polyfill available (which I wrote).

Solution 5:

To get precise values you should use Performance interface. It’s supported in modern versions of Firefox, Chrome, Opera and IE. Here’s an example of how it can be used:

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

Date.getTime() or console.time() are not good for measuring precise execution time. You can use them if quick rough estimate is OK for you. By rough estimate I mean you can get 15-60 ms shift from the real time.

Check this brilliant post on measuring execution time in JavaScript. The author also gives a couple of links about accuracy of JavaScript time, worth reading.

Solution 6:

Use Firebug, enable both Console and Javascript. Click Profile. Reload. Click Profile again. View the report.