Javascript Webkit滞后于画布中的大型图像

我对webkit（chrome/safari）和带有大图像的画布有一些问题

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

共有130帧，我们必须将单个图像放入4个精灵中，以减少页面的单个请求负载

每个精灵的大小大约是2,5MB，我们只需要切片所需帧的一部分。到目前为止，一切都有可能

我不想用太多的代码来打扰你。但最终它只是关于：

this.$context.drawImage（img，0，top，img.width-1，（img.height/sequenceCount）-1，0，0，this.$canvas.width，this.$canvas.height）

在80毫秒超时内调用witch

我们做到了这一点，它可以在所有主流浏览器上运行。但是对于webkit，对下一个sprite的每次更改都会导致大约400ms的硬延迟

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

if（Browser.ie9）{
对于（var x=0；x

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

但是使用webkit浏览器，我仍然会得到大约400毫秒的延迟时间

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

你知道这是什么吗

---

谢谢你的帮助

每次获得画布或图像宽度时，您都在访问DOM，这通常比访问JS内存慢。如果将这些值存储在resize上，并改用存储的值，您可能会看到改进

var canvasWidth, canvasHeight, imgWidth, imgHeight;

---

谢谢你的回答。好主意，但不幸的是，这不是解决办法。使用webkit仍有延迟。还有其他想法吗？哇，这让人很困惑：如果我从一个变量中得到图像的宽度和高度，我的IE9解决方案就不再适用于精灵开关了。这根本没有道理！

var canvasWidth, canvasHeight, imgWidth, imgHeight;