Skip to content

Daniel Lamb Byte–size Bits & Bobs

Monitor Web Worker Performance

3 minute read.

Web Worker Performance Tracking

Given the black-box1 nature of Web Workers2, it can seem difficult to get an accurate assessment of where exactly time is being spent.

Most modern browsers support the high resolution time API via performance.now(). This method gives you micro-second precision performance information, and it is a great way to keep an eye on application performance.

For those browsers that don’t yet support high resolution time, I created a simple 0.1 kb performance.now polyfill a couple years ago.

Until today the polyfill worked great in a browser context but threw an error if you tried to use the script in a Web Worker. This was because the script assumed it would be augmenting the window object.

Simply changing window to self was all it took to make the perfnow.js micro-library compatible with web workers!

Web Worker Example

Following is a simple example of how you can use the polyfill in your projects.

Example HTML Markup

<input value="41">
<button>+ 1</button>
<div id="result"></div>

Example JavaScript

var input = document.querySelector('input');
var button = document.querySelector('button');
var result = document.querySelector('#result');
var worker = new Worker('worker.js');

worker.onerror = console.error;
worker.onmessage = function(e) {
  result.innerHTML = e.data;
};

button.onclick = function() {
  worker.postMessage(parseInt(input.value));
};

Example Worker

// Perfnow.js polyfill © Daniel Lamb <dlamb.open.source@gmail.com> MIT
function perfnow(e){"performance"in e||(e.performance={});var o=e.performance;e.performance.now=o.now||o.mozNow||o.msNow||o.oNow||o.webkitNow||Date.now||function(){return(new Date).getTime()}}perfnow(self);

// listen for messages
onmessage = function(e) {
  var start = performance.now();
  var num = e.data + 1;
  var delta = performance.now() - start;
  var result = 'The answer is ' + num + '<br>addition performed in ' + delta + 'ms';
  // post response
  postMessage(result);
};

Live Demo

Both the example and the worker are available on CodePen if you want to see them in action.

Note: As a general rule, if a browser supports Web Workers it also supports performance.now() natively, with iOS Safari version 8.4 being a notable exception to that rule. Therefore, this polyfill is probably most useful outside the context of web workers.

  1. A “black box” system is where you only have access to the input and output information without insight into how it is processed.

  2. Web Workers allow developers to easily execute JavaScript in background threads to reduce user interface interference.


Give Feedback via my AMA (ask me anything) project on GitHub. Published on by Daniel Lamb.
You may also enjoy these posts