Anında unsurları oluşturmak ve onları taşımak için güçlü olmak için en iyi yaklaşım nedir? Örneğin, bir dikdörtgen, daire ve çokgen oluşturmak ve bu nesneleri seçmek ve taşımak için sonra.

HTML5 bu mümkün yapabilirsiniz elementleri sağlayan anlıyorum: svg, canvas div. Yapmak istediğim şey için, hangisi bu elemanların en iyi performansı verecektir?

Bu yaklaşımları karşılaştırmak için, her bir başlık, altbilgi widget ve metin içeriği olan görsel olarak aynı üç web sayfaları oluşturma düşünüyordum. Widget ilk sayfa olurdu oluşturulan tamamen canvas eleman, ikinci tamamen svg element, üçüncü düz div öğesi, HTML ve CSS.

Kısa cevap:

SVG olurdudaha kolayseçim için, ve etrafında hareket zaten inşa edilmiştir. SVG nesneleri "" işleyicileri, vb. ' I var DOM nesneleri,

DİVs tamam ama hantal vekorkunççok sayıda performans yükleniyor.

Tuval en iyi performansı elde etti, ama yönetilen Eyalet (nesne seçimi, vb.) kendini tüm kavramları uygulamak, ya da bir kütüphane kullanmak zorunda.

Uzun cevap:

HTML5 Tuval sadece bir bit eşlem için bir çizim yüzeyi. Seni tuzağa çekmek için (mesela, bir renk ve çizgi kalınlığı), çeken şey, ve sonra Tuvale hiçbir bilgi bu şey gelmiyor nerede olduğunu ya da ne olduğunu ... sadece çizilmiş, sadece piksel. Eğer dikdörtgen çizin ve onları taşımak ya da seçilebilir olması, daha sonra sahip olmak istiyorsanız sıfırdan tüm kod gerekirdahilonları çekti hatırlamak kodu.

Öte yandan SVG sunduğu her nesne için başvurular korumak gerekir. Oluşturduğunuz her SVG/VML eleman DOM gerçek bir unsurdur. Varsayılan olarak bu izin devam etmen çok daha iyi takip elemanları oluşturmak ve yapar ile ilgili şeyler gibi fare olayları daha kolay varsayılan olarak, ama yavaşlatır anlamlı olduğu zaman, çok sayıda nesne

Bu SVG DOM başvurular çizdiğiniz şeyler ile ilgili bazı ayak oyunları sizin için yapılır. Ve SVG render daha hızlı olurgerçekten büyükişlerken nesneler, ama daha yavaşbirçoknesneler.

Oyun muhtemelen Tuval daha hızlı olurdu. Büyük bir harita programı SVG muhtemelen daha hızlı olacaktır. Eğer Tuval kullanmak istiyorsanız, hareketli nesneleri alma ve here çalışan bazı dersler var.

Tuval daha hızlı işler ve ağır bitmap manipülasyon için daha iyi olurdu (animasyon gibi), ama eğer etkileşim çok istiyorsanız daha fazla kod alacak.

HTML DİV-yapılan çizim karşı Tuval yapımı çizim üzerinde sayılar bir grup koşuyoruz. Her yararları hakkında büyük bir post yapabilirim, ama benim test alakalı sonuçları bazı özel uygulama için göz önünde vereceğim

Tuval yaptım ve "düğüm." hareketli ikisinin DİV test sayfaları HTML, Tuval bezlerine ve parça Javascript yarattım tuttu objeler. HTML düğümler hareketli Divs.

100,000 benim iki testlerin her düğüm attım. Oldukça farklı bir şekilde icra ettiler:

HTML test sekmesi yüklemek için sonsuza kadar (biraz altında 5 dakika, sayfayı ilk kez öldürmek istedi krom zamanlı) aldı. Chrome Görev Yöneticisi sekmesini 168MB kadar çekici olduğunu söylüyor. Bakıyorum bakıyorum, 0% zaman 12-13% CPU zamanı alır.

Tuval sekmesini bir saniye içinde yüklenir ve 30 MB yer kaplar. Ayrıca CPU zaman 'ü her zaman, ya da bir bakıyor ne olursa olsun alır.(2013 edit: çoğunlukla sabit)

HTML sayfası üzerine sürükleyip geçerli Kur Tuval testinde her 30 milisaniye yeniden çizmek için olduğu tasarımı ile beklenen daha yumuşak. Bunun için Tuval için sahip olduğu iyileştirmeleri var. (tuval hükümsüzlük olmak kolay, bu bölgeler, seçici yeniden,.. sadece uygulama gibi hissediyorum nasıl bağlıdır vb kırpma)

Tuval nesne düzenleme ile daha fazla yük zaman tabi ki çok daha hızlı bu basit bir test, ve divs olarak alabilir şüphe yok. Çizim/yükleme daha hızlı Branda ve iyileştirmeleri için çok daha fazla oda var da (yani, off-screen şeyler hariç çok kolaydır).

Sonuç:

• SVG muhtemelen uygulamalar için daha iyi olduğunu ve birkaç ürün (1000'den daha az? ile uygulamalar Gerçekten bağlıdır)
• Tuval nesneleri ve dikkatli manipülasyon binlerce için iyidir, ama daha çok bir kod (veya kitaplığı) başlangıç için gereklidir.
• HTML Divs aksak ve çekleri yuvarlak köşeler ile mümkündür ölçekli değil, şekiller mümkündür ama piksel genişliğinde minik minik divs yüzlerce içerir karmaşık hale getirir. Delilik gelişir.