nexttick

JavaScript performance comparison

Revision 15 of this test case created by dfgdsdfsfdsdfgq

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var nextTick1 = function() {
    // Firefox doesn't support MessageChannel so we use something that works..
    if (!('MessageChannel' in window)) {
      return function(fn) {
        setTimeout(fn, 0)
      }
    }
    var channel = new MessageChannel();
    var queue = [];
    channel.port1.onmessage = function() {
      queue.shift()();
    };
  
    function nextTick(fn) {
      queue.push(fn);
      channel.port2.postMessage();
    }
    return nextTick;
  }();
  
  var nextTick2 = function() {
    function nextTick(fn) {
      return setTimeout(fn, 0);
    }
    return nextTick;
  }();
  
  
  var nextTick3 = function() {
    function nextTick(fn) {
      var image = new Image();
      image.onerror = fn;
      image.src = 'data:,foo';
    }
    return nextTick;
  }();
  
  var nextTick4 = function() {
    function nextTick(fn) {
      var script = document.createElement('script');
      script.onload = function() {
        document.body.removeChild(script);
        fn();
      }
      script.src = 'data:text/javascript,';
      document.body.appendChild(script);
    }
    return nextTick;
  }();
  
  var nextTick5 = function() {
    // FAILS ON SOME BROWSERS SO USE SETTIMEOUT INSTEAD
    function nextTick(fn) {
      var req = new XMLHttpRequest;
      req.open('GET', 'data:text/plain,foo', false);
      req.onreadystatechange = function() {
        req.onreadystatechange = null;
        fn();
      };
      req.send(null);
    }
    return nextTick;
  }();
  
  var nextTick6 = function() {
    var key = 'nextTick__' + Math.random();
    var queue = [];
    window.addEventListener('message', function(e) {
      if (e.data !== key) {
        return;
      }
      queue.shift()();
    }, false);
  
    function nextTick(fn) {
      queue.push(fn);
      window.postMessage(key, '*');
    }
  
    return nextTick;
  }();
  
  var nextTick7 = function() {
    function nextTick(fn) {
      requestAnimationFrame(fn);
    }
    return nextTick;
  }();
  
  var nextTick8 = function() {
    var resolved = Promise.resolve();
  
    function nextTick(fn) {
      resolved.then(fn);
    }
    return nextTick;
  }();
  
  var nextTick9 = (function() {
    var queue = [],
      dirty = false,
      fn, hasPostMessage = !! window.postMessage,
      messageName = 'nexttick';
  
    function flushQueue() {
      while (fn = queue.shift()) {
        fn();
      }
      dirty = false;
    }
    var trigger = (function() {
      return hasPostMessage ? function() {
        window.postMessage(messageName, '*')
      } : function() {
        setTimeout(function() {
          processQueue();
        }, 0)
      };
    }());
    var processQueue = (function() {
      return hasPostMessage ? function(event) {
        if (event.source === window && event.data === messageName) {
          event.stopPropagation();
          flushQueue();
        }
      } : flushQueue;
    })();
  
    function nextTick(fn) {
      queue.push(fn);
      if (dirty) return;
      dirty = true;
      trigger();
    }
  
    hasPostMessage && (nextTick.listener = window.addEventListener('message', processQueue, true));
  
    nextTick.removeListener = function() {
      window.removeEventListener('message', processQueue, true);
    }
  
    return nextTick;
  })();

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Image.onerror
// async test
nextTick3(function() {
  deferred.resolve();
});
pending…
script.onload
// async test
nextTick4(function() {
  deferred.resolve();
});
pending…
window.onmessage
// async test
nextTick6(function() {
  deferred.resolve();
});
pending…
requestAnimationFrame
// async test
nextTick7(function() {
  deferred.resolve();
});
pending…
Promise.prototype.then
// async test
nextTick8(function() {
  deferred.resolve();
});
pending…
nextTick
// async test
nextTick9(function() {
  deferred.resolve();
});
pending…
setTimeout
// async test
nextTick2(function() {
  deferred.resolve();
});
pending…
MessageChannel (fallback to setTimeout on Firefox)
// async test
nextTick1(function() {
  deferred.resolve();
});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments