在浏览器中显示图像的最快方法是什么？

Question

假设我从某个地方（在我的例子中是网络套接字）获取二进制图像数据，那么在网络浏览器中呈现它们的最快方法是什么？

我使用 Canvas 和 Blob 提出了这种方法。

    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'}))

它已经非常快了（大约 3 毫秒 - 10 毫秒的渲染时间 vor 全高清 jpeg）。是否有另一种（更快）方式，可能没有 Image 元素？

编辑：是的，这是疯狂的科学，但为了达到每毫秒 60fps 的速度很重要。

Answer 1

你可以试试 requestAnimationFrame。这是来自 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)
    });
};