postMessage

JavaScript performance comparison

Revision 14 of this test case created

Info

echoSetTimeout is used when features aren't available. For instance:

Preparation code

<script>
  var payload = {
    shortString: 'test',
    simple: {
      foo: "bar",
      arr: []
    }
  };
 
  var echoSetTimeout = (function() {
    return function(msg, cb) {
      setTimeout(cb, 0, msg);
    }
  })();
 
  var echoSetImmediate = (function() {
    var setImmediate = window.setImmediate || window.webkitSetImmediate || window.mozSetImmediate || window.oSetImmediate || window.msSetImmediate;
    if (!setImmediate) {
      return echoSetTimeout;
    }
    return function (msg, cb) {
      setImmediate(cb, msg);
    }
  })();

  var echoRequestAnimationFrame = (function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
    if (!requestAnimationFrame) {
      return echoSetTimeout;
    }
    return function(msg, cb) {
      requestAnimationFrame(cb);
    }
  })();
 
  var echoWorker = (function() {
    var code = 'onmessage = function(e) { postMessage(e.data) };';
    var blobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder /* NOTE: Worker in IE does not support data urls due to same origin policy. `|| window.MSBlobBuilder` */;
    if(!blobBuilder) {
      return echoSetTimeout;
    }

    var bb = new (blobBuilder)();
    bb.append(code);
 
    var blobURL = (window.URL || window.webkitURL || window.mozURL).createObjectURL(bb.getBlob());
    var worker = new Worker(blobURL);
   
    return function(msg, cb) {
      worker.onmessage = cb;
      worker.postMessage(msg);
    };
  })();
 
  var echoIFramePostMessage = (function() {
    var iframe = document.createElement('iframe');
    window.onload = function() {
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      iframe.contentDocument.write('<html><head><script>onmessage = function(e) { e.source.postMessage(e.data, "*") };<'+'/script><'+'/head><'+'/html>');
    };
   
    return function(msg, cb) {
      window.onmessage = cb;
      iframe.contentWindow.postMessage(msg, '*');
    };
  })();
 
  var echoPostMessage = (function() {
    return function(msg, cb) {
      async = false;
      window.onmessage = cb;
      window.postMessage(msg, '*');
      async = true;
    };
  })();
 
  var echoMessageChannel = (function() {
    if(!window.MessageChannel)
      return echoSetTimeout;
 
    var mc = new MessageChannel();
    return function(msg, cb){
      mc.port1.onmessage = cb;
      mc.port2.postMessage(msg);
    };
  })();

  var echoImgOnError = (function() {
    return function (msg, cb) {
      var img = new Image();
      img.onerror = function() {
        img.onerror = null;
        cb(msg);
      }
      img.src = 'data:image/png,' + Math.random();
    }
  })();

  var echoScriptReadyState = (function() {
    return function (msg, cb) {
      var script = document.createElement("script");
      script.onreadystatechange = function() {
        script.onreadystatechange = null;
        cb(msg);
      }
      document.getElementsByTagName("head")[0].appendChild(script);
    }
  })();

</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Worker shortString
// async test
echoWorker(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
iframe shortString
// async test
echoIFramePostMessage(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
setTimeout shortString
// async test
echoSetTimeout(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
sameWindowPostmessage shortString
// async test
echoPostMessage(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
requestAnimationFrame shortString
// async test
echoRequestAnimationFrame(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
setImmediate shortString
// async test
echoSetImmediate(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
img onerror shortString
// async test
echoImgOnError(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
script readystate
// async test
echoScriptReadyState(payload.shortString, function resolve() {
  deferred.resolve();
});
pending…
MessageChannel
// async test
echoMessageChannel(payload.shortString, function resolve() {
  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. Here’s a list of current revisions for this page:

0 comments

Add a comment