Webkit 滞后于画布中的大图像

Question

我在使用 webkit (chrome/safari) 和带有大图像的 Canvas 时遇到了一些问题。

对于我的客户，我们必须编写一个动画介绍电影，在画布上以每帧 80 毫秒的速度更改图像。

共有 130 帧，我们不得不将单个图像放入 4 个 sprite 中，以减少页面的单个请求负载。

每个精灵大小大约为 2.5MB，我们只需对所需帧的部分进行切片。到目前为止，可能。

不想用太多代码打扰您。但最终它只是：

this.$context.drawImage(img, 0, top, img.width-1 ,(img.height / sequenceCount)-1, 0, 0, this.$canvas.width, this.$canvas.height) ;

witch 在 80 毫秒超时内被调用。

我们做到了，它适用于所有主要浏览器。但是对于 webkit，对下一个精灵的每次更改都会导致大约 400 毫秒的硬延迟。

IE9 也有同样的问题，但可以通过在开始时绘制每个精灵来解决

   if (Browser.ie9) {
       for(var x = 0; x < this.sequence[0].sprites.length; x++){                
           this.draw(this.sequence[0].sprites[x].obj, 0, 1); 
       }                   
       this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
   }

（draw 函数仅包含前面示例中的 drawImage 函数。）

但是对于 webkit 浏览器，我仍然会得到大约 400 毫秒的滞后时间。

是的，图像已预加载。所以这不是问题。

有什么想法吗？

感谢您的帮助！

Answer 1

每次获取画布或图像宽度时，都是在访问 DOM，这通常比访问 JS 内存要慢。如果您在调整大小时存储这些值并改用存储的值，您可能会看到改进。

var canvasWidth, canvasHeight, imgWidth, imgHeight;