javascript - Firefox 中屏幕外 Canvas 的性能问题

Question

我遇到了以下问题，我相信我一定是在做一些愚蠢的事情，但我找不到它。 (这是在 Firefox 8 中)

我正在制作一个大的 Sprite 文件，制作一个新的小 Canvas 来容纳该 Sprite 的一个图 block ，然后使用最基本的drawImage重载来在我的“屏幕” Canvas 中的数百个位置绘制这个孤立的图 block 。

我正在这样做，而不是简单地使用 drawImage 的最后一个重载，它只需要一个较大的 Sprite 文件。通过避免这种剪裁，在 Chrome 中，我获得了大约 10% 的性能提升，这让我感到惊讶。但是，在 Firefox 中，帧速率从 300 FPS 下降到 17 FPS。

所以，我看到的基本上是“从图像到 Canvas ”绘制比在 Firefox 中“从 Canvas 到 Canvas ”绘制快 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(tileCanvas, x,y);  

我愿意:

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

快了 20 倍

我是不是漏掉了什么？

---

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

http://www.crystalgears.com/isoengine/jstests3-canvas.html

很抱歉，代码非常丑陋，这是一个快速的 hack，不打算让其他人看到，甚至我自己也不会在几天内看到。

Answer 1

如果不进行分析(尤其是您的特定图像，也许还有您的特定显卡+驱动程序)，很难确定，但您可能会点击 https://bugzilla.mozilla.org/show_bug.cgi?id=705559

当然，这个错误应该会导致 drawImage with <canvas>参数要慢一些；虽然慢 20 倍是非常令人惊讶的(因此是“可能”)。