L'uso di drawImage con Canvas è molto lento su Chrome

Question

Ho cercato di disegnare un numero elevato di istanze di un file SVG su una tela utilizzando drawImage. Creando un singolo elemento immagine usando SVG come sorgente, quindi usando drawImage per ogni istanza sulla tela, speravo di poter produrre un'immagine composita nell'area di disegno molto rapidamente anche con un numero elevato di istanze.

Per quanto riguarda le prestazioni, questo funziona bene in Firefox - Sono in grado di disegnare 60.000 istanze in circa 300 ms. Ma su Chrome è terribilmente lento: 16.000 istanze richiedono più di 5 secondi. Ho inserito una versione del codice su jsfiddle, che dimostra il problema su Chrome.

Ho un esempio di come sto chiamando drawImage di seguito, dove la tela è riempita con il maggior numero possibile di immagini di dimensione x dimensioni. Ho letto un suggerimento per provare a utilizzare una seconda area nascosta per salvare tutte le istanze, quindi aggiornare la tela visibile con una chiamata. Ma questo non ha influito sulle prestazioni, le chiamate individuali sembrano ancora impantanarsi.

Qualche idea su cosa sta andando male e cosa posso fare per risolverlo?

  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

Rallentamento 1: Si verifica quando l'origine o di tela di destinazione è nella RAM e l'altra tela è sulla GPU.

rallentamento 2: verifica quando src e dest tele sono diverse dimensioni

---

Rilevante bug: http://code.google.com/p/chromium/issues/detail?id=170021

ho notato lo stesso problema, e semplificato il caso a disegnare una tela bianca per un altro. Non sembra essere un problema quando le tele hanno le stesse dimensioni, ma a un certo punto la performance prende un tuffo nel naso. Ecco il jspref, ei miei risultati:

notare la differenza di 255x255 a 100x100 e 260x260 a 100x100.