Tuval ile drawImage kullanımı çok yavaş Chrome

Question

DrawImage kullanarak bir tuvale çok sayıda örnek SVG dosyası çizmeye çalışıyorum. Kaynak olarak SVG'yi kullanarak tek bir görüntü öğesi oluşturarak, tuval üzerindeki her örnek için drawImage kullanarak, çok sayıda örnekle bile çok hızlı bir şekilde tuvalde kompozit bir görüntü üretebileceğimi umuyordum.

Performans açısından, bu Firefox'ta iyi çalışır - Yaklaşık 300 ms'de 60.000 örnek çizebilirim. Ancak Chrome'da çok yavaş: 16.000 örnek 5 saniyeyi alıyor. Chrome'da sorunu gösteren jsfiddle kodunun bir sürümünü ekledim.

Aşağıda, tuvalin mümkün olduğunca çok boyutlu x boyutta görüntülerle doldurulduğu aşağıdan drawImage öğesini nasıl çektiğime dair bir örnek var. Tüm örnekleri arabelleğe almak için ikinci, gizli bir tuval kullanmayı denemek için bir öneri okudum, ardından görünen tuvali tek bir aramayla güncelledim. Ancak bu, performansı etkilemedi, bireysel drawImage çağrıları hala bazı şeyleri rahatsız ediyor gibi görünüyor.

Neyin yanlış gittiğine dair bir fikriniz varsa, bunu düzeltmek için neler yapabilirim?

  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

yavaşlama 1: kaynak ya da hedef tuval RAM belleğinde olup diğer tuval bir grafik işlemci olduğunda oluşur.

Yavaşlama 2: src ve dest tuvaller farklı boyutlarda

olduğunda meydana gelir

---

İlgili hata: Ben aynı sorunu fark etti ve bir boş bir tuval çizim davayı basitleştirilmiş var http://code.google.com/p/chromium/issues/detail?id=170021

bir diğeri. Tuvaller aynı büyüklükte olduğunda bir sorun gibi görünmüyor, ama belli bir noktada performans bir burun dalışı alıyor. İşte jspref, ve benim sonuçları:

Bildirimi 100x100 boyutunda 100x100 ve 260x260 için 255x255 farkı.