SVG metin öğesi hızı

Question

Çok fazla svg dayanan bir web uygulaması yapıyorum. Referans için, hepsiyle başa çıkmak için raphael js kütüphanesini kullanıyorum.

Bu özel durumda, kaydırma çubuğunu taklit eden ve svg özelliklerini (~ 500 öğe) ekran boyunca geçiren bir şey uyguladık. Bu özelliklerin bir kısmı <text> (~ 100) öğedir. Diğer öğeler <rect>, <image> ve <path> öğelerini içerir.

Bu yüzden, uygulamamın dizüstü bilgisayarımda gerçekten çok hızlı olmadığını ve hız nedeniyle bir ipad ile uğraşmak için doğru bir şekilde sinir bozucu olduğunu fark ettim. Bununla birlikte, kaydırma sırasında metin öğeleri kaldırıldığında veya yok sayıldığında, hemen iyi bir hıza ulaşır. <text> elemanlar dahil edildiğinde

-L ancak alır, 120 ms ( new Date().getTime() kullanılarak çok ham olanlar) bazı hızı testleri yaparak çalıştı ve <text> elemanları hariç tüm öğeleri taşımak için 10 ms ~ keşfetti.

Bunun olduğuna inanıyorum çünkü her harf bir vektör şekli olarak işlenir ve böyle karmaşık bir yapı tarafından tam olarak neyin engellendiğini hesaplamak için çok fazla işlem gücü alır.

Yalnızca metni katıştırmak mümkün mü, bu nedenle metin şekil olarak değil, raster grafik olarak oluşturuluyor mu? Ya da metin oluşturma işleminin performansını başka bir şekilde artırın mı?

Arka plan saydamlığına ihtiyacım yok ve herhangi bir süslü yazı tipi kullanmıyorum.

Answer 1

Metni Canvas ve embed images into the SVG kullanarak prerender yapabilirsiniz. Bunun genel olarak metin öğesi oluşturma ile karşılaştırıldığını bilmiyorum, ancak our demos için bu oldukça iyi çalışıyor ("hiyerarşi" örneğinin alt gölgesine bakın - önce tuvale işlenir ve sonra da SVG içinden çoğaltılabilir ve başvuruda bulunulur) .

Bu demoların aynı zamanda sanallaştırmayı da kullandığını unutmayın, örneğin, görüntüyü yakınlaştırırsanız ve öğelerin yalnızca bir kısmı görünüm içinde ise, diğerleri SVG'den kaldırılır ve bu da büyük bir hız kazanır.

Demolar, öğeleri yalnızca hareket ettirmekten çok daha fazlasını yapıyor, dolayısıyla aynı veya daha iyi bir performans elde etmek kolay olmalı.

Raphael ile bunun nasıl yapılacağını bilmiyorum, ama veri url'sini tuval resminden SVG'ye de raphael ile koyabileceğinizi düşünüyorum. Raphael sitesine göre

Answer 2

Paper.print()

Esasen metin dönüştürülür belirli boyutta verilen pozisyonda verilen yazı tipi kullanılarak yazılı metin verilen temsil yolu oluşturur bir yol. Açıkçası bu performans sorunları var.

Muhtemelen Kağıt kullanarak yapışmak en iyisidir.Metin() Sadece http://www.jsperf.com bazı testler kurdunuz tavsiye dağıtmaya ile

Yani içerik değil

GÜNCELLEME. Farklı Rafael nesnelerini canlandırmak ve dönüştürmek için performans farklılıklarını karşılaştırmak için kullanılabilirler.

Bunları iPad'inizde çalıştırırsanız, metin öğelerinin taşınması gerçekten daha yavaş olup olmadığını göstermelidir. Unutulmaması gereken bir başka nokta da, en azından test ettiğim testlerde, paper.print() ve paper.text() performans açısından farklı değildi.

Run the tests on jsperf