As the browser has evolved the possibilities of what can be achieved on the web have greatly increased. Technologies like Flash have given way to newcomers like Canvas and WebGL. But as we create more complex applications for the web we also need to be mindful of performance. To provide truly engaging experiences our applications need to run smoothly, which means there’s a lot of testing to do during development.
In this blog post you’re going to learn how to test the performance of your applications using high resolution timestamps.
Obtaining High Resolution Timestamps
Unlike regular timestamps created with
Date.now(), a high resolution timestamp is precise to a thousandth of a millisecond. Having this level of precision can be very useful when testing code that needs to run really fast. If you’ve ever developed games or animations you might understand just how useful this can be.
Note: If you read my previous post on
requestAnimationFrame you may remember that all of the code used to draw a single frame needs to be executed within 16.67 milliseconds.
To generate a high resolution timestamp (DOMHighResTimeStamp) you use the
now method that is available on the
Example result: 5081.6239999985555
performance object also includes other data that can be useful for testing, including a
PerformanceTiming object that is accessible via
PerformanceTiming object contains a property called
navigationStart. The value of this property is a regular timestamp that represents when the browser started to load the page. The timestamps in the
PerformanceTiming object are relative to the Unix epoch, however high resolution timestamps are not. Instead these timestamps are measured relative to the value of
Date.now() // 1387445119319
performance.now() // 7865.671999999904
Note: Measuring relative to
navigationStart is more than adequate for performance testing as your app doesn’t need to know how many milliseconds have passed since the Unix epoch. As long as all your measurements are taken relative to the same point, the results will be accurate.
Using High Resolution Timestamps
Timing how long it takes for your code to execute is fairly straightforward. You need to create a variable before and after the piece of code you wish to test, and populate those variables with the value returned by
performance.now(). Subtracting the first variable from the second variable will then give you the amount of time that your code took to execute.
The code below shows a simple example of how to do this.
// Take a timestamp at the beginning.
var start = performance.now();
// Execute the code being timed.
// Take a final timestamp.
var end = performance.now();
// Calculate the time taken and output the result in the console
console.log('doTasks took ' + (end - start) + ' milliseconds to execute.');
Browser support for
performance.now() is reasonably good among modern browsers, with Safari being the only exception. Paul Irish has put together a polyfill that imitates the behaviour of
performance.now(). Be sure to read the comment at the top of the file if you intend to use it in your own projects.
In this blog post you have learned how to use
performance.now() to obtain high resolution timestamps, and how these can be used to test the performance of your code.