[英]What's the fastest way to display images in browser?
假设我从某处(在我的情况下是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,每毫秒计数。
您可以尝试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)
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.