Javascript Firefox中屏幕外画布的性能问题

我有以下问题，我相信我一定是在做傻事，但我找不到。（这在Firefox8中）

我正在使用一个大的精灵文件，制作一个新的小画布来容纳精灵的一个平铺，然后使用最基本的重载

drawImage

在我的“屏幕”画布中的数百个位置绘制这个孤立的平铺

我这样做，而不是简单地使用最后一个重载

drawImage

，它只占用较大的sprite文件的一部分。通过避免这种剪辑，在Chrome中，我获得了大约10%的性能提升，这让我感到惊讶。然而，在Firefox中，帧速率从300 FPS下降到17 FPS

所以，我看到的本质是，在Firefox中，“从图像到画布”的绘制速度大约是“从画布到画布”绘制速度的20倍

这是正确的吗？我还没有找到关于这个特殊案例的任何信息，但这是我在测试中看到的

另外，这是我正在使用的代码。我做了什么难以置信的蠢事吗

function Test5() {
    var imgSprite = $('imgSprite');
    var tileCanvas = document.createElement("canvas");
    tileCanvas.width = 64; tileCanvas.height = 31;
    var tileCtx = tileCanvas.getContext("2d");
    tileCtx.drawImage(imgSprite, 0, 0, 64, 31, 0, 0, 64, 31);

    //--------------------------------------
    var ctx = getContext('mainScreen');

    ctx.fillStyle = '#fff';

    time(function() { // time will run this function many times and time it
        ctx.fillRect(0,0, 1200,900);
        var x=0, y=0, row = 0;
        for (var i=1; i < 1000; i++) {
            ctx.drawImage(tileCanvas, x,y); // <-- this is the line I care about
            // some simple code to calculate new x/y
        }
    }, 1000, "Test5", 'Drawing from an individual tile canvas, instead of a section of big sprite');
}

我有：

 ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);  

那要快20倍

我是不是遗漏了什么

---

编辑：问了这个问题后，我为自己制作了一个小页面，在不同的平台上测试几种不同的东西，看看在每种平台上做事情的最佳方式是什么

---

很抱歉，代码非常难看，这是一个快速的黑客攻击，不想让别人看到，甚至我自己在几天内也看不到。

如果不进行分析（特别是使用特定的图像和特定的图形卡+驱动程序），很难确定，但您可能会遇到问题

---

当然，这个bug会导致带有

参数的drawImage稍微慢一些；虽然慢20倍是非常令人惊讶的（因此“可能”）。

你能给我们看一下

time（）的结果和代码吗？

这样我们就可以玩了time（）是一个非常简单的函数。查看该页面，这是一系列不同的方法来做相同的事情，我曾经在不同的平台上测试过最好的方法。要再现此情况，请单击3个“测试1”按钮。你会注意到画布上的一个比另外两个慢20倍。很抱歉，代码很难看，非常混乱，我这样做主要是为了快速破解，这实际上是从另一个快速破解中复制/粘贴/合并的结果。但是你可以用这个测试一些有趣的东西。谢谢哦，好的。。。谢谢你的回复，这就解释了。希望他们最终能解决这个问题。同时，我还注意到，在Safari iPhone中使用小图像（使用toDataURL（）创建）比使用canvas更快，因此我对Android/Chrome使用了canvas，对Firefox/iPhone使用了toDataURL（）。但如果这有助于分析/改进，这可能会有所帮助：哦，顺便说一下。。。不确定这是否被认为是一个“bug”，但我注意到的另一件事是，如果我在Chrome的“画布区域”外画画，它的速度会非常快，而在Firefox中，它的速度与在画布内画画的速度完全相同。（您可以通过在该测试页面中比较Test5和Test9的性能看到这一点）。似乎Chrome先检查边界，甚至决定不进行闪电战。实现这样的东西可能有意义，也可能没有意义，不确定用例，只是注意到行为上的巨大差异。我在Firefox代码中没有看到任何特殊的案例路径，当绘图完全在画布之外时。。。我想知道人们是否经常这样做。谢谢你的测试用例！

 ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);