SVG rect vs div vs canvas

Question

Just imagine building Google Maps for a large building floor plan with 3000 rooms.

I need to display up to 3000 rectangles (the best would be to also be able to render random polygons, but at this point, this is not the biggest issue). Each of them should have events attached to them such as mouseover and click that will have some effects on other dom elements on the page. I also need to be able to zoom in and out.

I know I can do it with SVG (Raphael.js), plain divs rendering or canvas.

I am wondering if anyone has specific recommendations to make for what I am trying to build. It needs to render fast enough (around 1 second or so) on the slowest browsers. (IE8,Firefox 3.6 and hopefully IE7, even though I am not dreaming too much...)

Thanks for the help, Nicolas.

PS: So far, I have experienced that rendering 3000 rectangles takes up to 7 seconds on IE8 with Raphael.js, which is rather slow. It also seems than rendering plain div is up to 6 times faster on IE8.

Answer 1

3000 DOM objects with events attached is going to be very painful for some machines to handle. Generally once you get into the "thousands" range the performance of DOM-based solutions (divs, SVG) gets really bad. It is nigh impossible to get good loading times with that many DOM elements.

The performance of excanvas itself is also really bad. The second there is any animation the performance of excanvas turns awful. Since excanvas merely mimicks Canvas by making VML (SVG), its going to be at least just as slow (and almost always slower) than doing just SVG/VML alone.

See my answer here for a detailed analysis: HTML5 Canvas vs. SVG vs. div

I believe that one of the requirements on your list has got to go. The number of objects, the performance, or the platform.

My suggestion to you would be to drop support for the older browsers if possible and go with Canvas.