SVG rect vs div vs canvas

Question

Imagine la construcción de Google Maps para una gran planta con 3000 habitaciones.

Necesito mostrar hasta 3000 rectángulos (lo mejor sería también poder representar polígonos aleatorios, pero en este punto, este no es el mayor problema). Cada uno de ellos debe tener eventos adjuntos, como mouseover y clic que tendrán algunos efectos en otros elementos dom en la página. También necesito poder acercar y alejar.

Sé que puedo hacerlo con SVG (Raphael.js), renderizado divs liso o lienzo.

Me pregunto si alguien tiene recomendaciones específicas para lo que estoy tratando de construir. Necesita procesarse lo suficientemente rápido (alrededor de 1 segundo o menos) en los navegadores más lentos. (IE8, Firefox 3.6 y es de esperar IE7, a pesar de que no estoy soñando demasiado ...)

Gracias por la ayuda, Nicolas.

PD: Hasta ahora, he experimentado que renderizar 3000 rectángulos toma hasta 7 segundos en IE8 con Raphael.js, que es bastante lento. También parece que renderizar div simple es hasta 6 veces más rápido en IE8.

Answer 1

3000 objetos DOM con eventos adjuntos va a ser muy doloroso para algunas máquinas para manejar. Generalmente, una vez que ingresas al rango "miles", el rendimiento de las soluciones basadas en DOM (divs, SVG) obtiene realmente malo. Es casi imposible obtener buenos tiempos de carga con tantos elementos DOM.

El rendimiento de excanvas también es realmente malo. En el momento en que hay animación, el rendimiento de Excanvas se vuelve horrible. Como excanvas simplemente imita a Canvas al crear VML (SVG), será al menos tan lento (y casi siempre más lento) que solo SVG/VML.

Véase mi respuesta aquí para un análisis detallado: HTML5 Canvas vs. SVG vs. div

creo que uno de los requisitos de la lista tiene que ir. La cantidad de objetos, el rendimiento o la plataforma.

Mi sugerencia para usted sería dejar de lado el soporte para los navegadores más antiguos si es posible e ir con Canvas.