在瀏覽器中顯示圖像的最快方法是什么？

Question

假設我從某處（在我的情況下是Web套接字）獲取二進制圖像數據，那么在Web瀏覽器中呈現它們的最快方法是什么？

我想出了使用Canvas和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'}))

它已經相當快了（〜3ms-10ms渲染時間，加上完整的高清jpeg）。 還有另一種（更快）的方法，也許沒有Image元素？

編輯：是的，這是瘋狂的科學，但是為了達到60 fps，每毫秒計數。

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