在Chrome上使用带有Canvas的drawImage非常慢

Question

我一直在尝试使用drawImage将大量SVG文件实例绘制到画布上。通过使用SVG作为源创建单个图像元素，然后对画布上的每个实例使用drawImage，我希望即使有大量实例，我也可以非常快速地在画布中生成合成图像。

性能方面，这在Firefox中运行良好 - 我可以在大约300ms内绘制60,000个实例。但在Chrome上它非常慢：16,000个实例占用超过5秒。我在jsfiddle上放了一个代码版本，这证明了Chrome上的问题。

我已经得到了一个示例，说明我如何在下面调用drawImage，其中画布中填充了尽可能多的x尺寸图像。我已经阅读了一个建议，尝试使用第二个隐藏的画布来缓冲所有实例，然后通过一次调用更新可见画布。但这并没有影响性能，个别的drawImage调用似乎仍在减少事情。

对于出了什么问题以及我可以做些什么来解决问题的任何想法？

            svgImg = new Image;

            can.width = 1800; can.height = 900;
            svgImg.onload = function () {
                if (internalSize == size)
                    return;
                internalSize = size;
                var timeBefore = new Date().getTime();
                var tot = 0;

                var canWidth = can.width;
                var canHeight = can.height;
                for (var x = 0; x < canWidth; x += size) {
                    for (var y = 0; y < canHeight; y += size) {
                        ctx.drawImage(svgImg, x, y, size, size);
                        tot++;
                    }
                }
                document.getElementById('count').innerHTML = "Total Count: " + tot;
                var timeAfter = new Date().getTime();
            };
            svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg";
            svgImg.width = size;
            svgImg.height = size;

Answer 1

减速1：当源或目标画布位于RAM中且另一个画布位于GPU上时发生。

减速2：当src和dest画布的大小不同时发生

---

相关错误：http://code.google.com/p/chromium/issues/detail?id=170021

我注意到了同样的问题，并简化了将一个空白画布绘制到另一个空白画布的情况。当画布尺寸相同时，它似乎不是一个问题，但在某个时刻，性能会下降。这是jspref，我的结果是：

注意255x255到100x100和260x260到100x100之间的差异。