drawImageをCanvasで使用すると、Chromeでの処理が非常に遅くなる

Question

drawImageを使用してSVGファイルのインスタンスを多数キャンバスに描画しようとしています。 SVGをソースとして使用して単一のイメージ要素を作成し、キャンバス上の各インスタンスに対してdrawImageを使用することで、多数のインスタンスがあっても非常に素早くキャンバス内に合成イメージを生成できることを期待していました。

これはFirefoxでもうまくいきます。約300msで60,000インスタンスを描画できます。しかし、Chromeでは非常に遅い：16,000インスタンスが5秒以上かかる。私はjsfiddleにコードのバージョンを入れました。これはChromeの問題を示しています。

ここでは、drawImageをどのように呼び出しているかの例があります。キャンバスにはできるだけ多くのサイズxサイズの画像が埋め込まれています。 2番目の隠しキャンバスを使用してすべてのインスタンスをバッファリングし、可視のキャンバスを1回の呼び出しで更新するよう提案しました。しかしそれはパフォーマンスには影響しませんでした。個々の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のキャンバスのサイズが異なる

がある場合に発生し

---

関連バグ：私は同じ問題に気づいて、1つの空白のキャンバスを描画する場合を簡略化しているhttp://code.google.com/p/chromium/issues/detail?id=170021

別のキャンバスが同じサイズのときには問題にはならないようですが、ある時点でパフォーマンスはノーズダイブになります。ここでjsprefあり、そして私の結果：

お知らせ100×100に100×100と260x260に255x255の違い。