SVG text element speed

Question

Sto costruendo un'applicazione web che si basa molto su svg. Per riferimento, sto usando la libreria raphael js per occuparsi di tutto ciò.

In questo caso particolare ho implementato qualcosa che simula una barra di scorrimento e sposta grappolo di funzioni svg (~ 500 elementi) sullo schermo. Una parte di queste funzioni sono gli elementi <text> (~ 100). Altri elementi includono gli elementi <rect>, <image> e <path>.

Così, ho notato che la mia applicazione non è davvero molto scattante sul mio portatile, ed è giù proprio fastidiosa per affrontare un iPad, a causa della velocità. Tuttavia, ogni volta che gli elementi del testo vengono rimossi o ignorati durante lo scorrimento, si ottiene immediatamente una velocità decente.

Ho provato a fare alcuni test di velocità (quelli molto grezzi, utilizzando new Date().getTime()) e ha scoperto che ci vogliono circa 10 ms per spostare tutti gli elementi ad eccezione di <text> elementi, ma ci vuole ~ 120 ms quando <text> elementi sono inclusi.

Credo che questo accada perché ogni lettera è rappresentata come una forma vettoriale e richiede un sacco di potenza di calcolo per calcolare ciò che è esattamente ostruito da una struttura così complessa.

È possibile incorporare semplicemente il testo, quindi il testo viene visualizzato come grafica raster e non come forme? O migliorare le prestazioni del rendering del testo in altro modo?

Non ho bisogno di trasparenza di sfondo e non utilizzo alcun carattere di fantasia.

Answer 1

È possibile prerender il testo utilizzando Canvas e embed images into the SVG. Non so come questo sia in linea con il rendering degli elementi di testo in generale, ma per our demos funziona abbastanza bene (vedi l'ombra esterna nell'esempio "gerarchia" - vengono prima sottoposti a rendering su tela e poi replicati e referenziati all'interno di SVG) .

Si noti che queste dimostrazioni fanno anche un uso pesante della virtualizzazione, cioè se si ingrandisce l'immagine e solo alcuni degli elementi sono effettivamente all'interno del viewport, gli altri vengono rimossi dal SVG, che offre un'enorme accelerazione.

Le demo fanno molto di più che spostare semplicemente gli elementi, quindi dovrebbe essere facile ottenere le stesse o anche migliori prestazioni.

Non so come farlo con Raphael, però, ma credo che dovresti essere in grado di inserire l'URL dei dati dall'immagine della tela nell'SVG anche con Raphael.

Answer 2

Paper.print() secondo il sito Raphael

Crea percorso che rappresentano dato testo scritto utilizzando dato carattere alla posizione indicata con data dimensione

In sostanza il testo viene convertito in un sentiero. Ovviamente questo ha problemi di prestazioni.

Probabilmente è meglio attenersi all'utilizzo della carta .text()

UPDATE

Quindi non contento di solo spenderanno consigli che ho creato alcuni test su http://www.jsperf.com. Possono essere usati per confrontare le differenze nelle prestazioni per animare e trasformare diversi tipi di oggetti di Raffaello.

Se li si esegue sul proprio iPad dovrebbe mostrare se gli elementi di testo sono molto più lenti da spostare. Un'altra cosa da notare è che, almeno nei test che ho eseguito, paper.print() e paper.text() non erano così diversi in termini di prestazioni.

Run the tests on jsperf