SVG rect vs div vs canvas

Question

Immagina di costruire Google Maps per una grande planimetria di un edificio con 3000 stanze.

Ho bisogno di visualizzare fino a 3000 rettangoli (il migliore sarebbe anche essere in grado di renderizzare poligoni casuali, ma a questo punto, questo non è il problema più grande). Ognuno di essi dovrebbe avere eventi collegati come mouseover e click che avranno effetti su altri dom sulla pagina. Devo anche essere in grado di ingrandire e rimpicciolire.

So di poterlo fare con SVG (Raphael.js), semplice rendering div o canvas.

Mi chiedo se qualcuno ha raccomandazioni specifiche da fare per quello che sto cercando di costruire. Deve eseguire il rendering abbastanza velocemente (circa 1 secondo circa) sui browser più lenti. (IE8, Firefox 3.6 e, auspicabilmente, IE7, anche se non sto sognando troppo ...)

Grazie per l'aiuto, Nicolas.

PS: Finora, ho sperimentato che il rendering di 3000 rettangoli richiede fino a 7 secondi su IE8 con Raphael.js, che è piuttosto lento. Sembra anche che rendere semplice div è fino a 6 volte più veloce su IE8.

Answer 1

3000 Gli oggetti DOM con eventi collegati saranno molto difficili da gestire per alcune macchine. Generalmente una volta entrati nella gamma "migliaia" le prestazioni delle soluzioni basate su DOM (divs, SVG) diventano in realtà non valide. È quasi impossibile ottenere buoni tempi di caricamento con tanti elementi DOM.

Anche le prestazioni degli excanvas sono davvero pessime. Nel secondo c'è un'animazione, la performance degli excanvas diventa terribile. Dato che excanvas si limita a mimetizzare Canvas creando VML (SVG), sarà almeno altrettanto lento (e quasi sempre più lento) rispetto a solo SVG/VML.

Vedere la mia risposta qui per un'analisi dettagliata: HTML5 Canvas vs. SVG vs. div

credo che uno dei requisiti sulla vostra lista ha avuto modo di andare. Il numero di oggetti, le prestazioni o la piattaforma.

Il mio suggerimento sarebbe di abbandonare il supporto per i browser più vecchi, se possibile, e andare con Canvas.