Javascript 什么'；在浏览器中显示图像的最快方式是什么？

假设我从某处获得二进制图像数据（在我的例子中是web套接字），在web浏览器中渲染它们的最快方法是什么

我使用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'}))

它已经相当快了（对于全高清jpeg，渲染时间约为3毫秒-10毫秒）。有没有其他（更快的）方法，也许没有图像元素

---

编辑：是的，这是疯狂科学，但为了达到每毫秒60帧的速度，你可以尝试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)
    });
};

---

你到底在做什么，10毫秒的速度不够快？你怎么知道这需要时间？所以，在这种情况下，更快是一毫秒或更少？？真正地想想看！你不能像这样使用base64字符串吗？使用img src数据非常快，比如延迟调用会比立即调用

drawImage

快多少？这将加快多个图像的处理速度。将渲染合并到一个重绘中可以使画廊之类的东西运行得更平滑。对于一张图片页面来说，这没有多大帮助@伯吉亚，我明白了。但是如果您在一个帧内多次调用

requestAnimationFrame

（对于多个图像），那么

setTimeout

shim不起作用……并且您需要更高级的东西，如

（函数（cbs）{function frame（）{while（cbs.length）cbs.shift（）；cbs=null}返回函数raf（cb）{if（！cbs）{setTimeout（frame，100/6）；cbs=[]；}cbs.push（cb）}（null））

这是个不错的选择。如果能在某些浏览器上实现更高的帧速率，我会很感兴趣。可能是1000/120。那将是8毫秒@贝吉