What's the fastest way to display images in browser?

Question

Assuming I get binary image data from somewhere (web sockets in my case), what's the fastest way to render them in a web browser?

I came up with this approach using Canvas and Blobs.

    var context = canvas.getContext('2d')
    var img = new Image()

    img.onload = function() {
      context.drawImage(img, 0, 0)
      window.URL.revokeObjectURL(this.src)
    }

    img.src = window.URL.createObjectURL(new Blob([data], {'type': 'image\/jpeg'}))

It's already pretty fast (~3ms - 10ms rendering time vor a full HD jpeg). Is there another (faster) way, maybe without the Image element?

edit: yes, this is mad science, but in order to achieve 60fps every ms counts.

Answer 1

You could try requestAnimationFrame. Here's a shim from Paul Irish.

// shim layer with setTimeout fallback
window.requestAnimationFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// ...

img.onload = function() {
    var self = this;
    requestAnimationFrame(function(){
        context.drawImage(self, 0, 0)
        window.URL.revokeObjectURL(self.src)
    });
};