SVG矩形與div對比畫布

Question

試想一下爲3000平方米的大型建築平面圖製作Google地圖。

我需要顯示多達3000個矩形（最好也是能夠呈現隨機的多邊形，但在這一點上，這不是最大的問題）。他們每個人都應該有附加的事件，如鼠標懸停和點擊，這將對頁面上的其他DOM元素產生一些影響。我也需要能夠放大和縮小。

我知道我可以用SVG（Raphael.js），普通div div渲染或畫布來實現。

我想知道如果有人有具體的建議，使我想要建立。它需要在最慢的瀏覽器上足夠快地渲染（大約1秒左右）。 （IE8，火狐3.6和希望IE7，即使我不是做夢太多...）

感謝您的幫助， 尼古拉斯。 PS：到目前爲止，我已經體會到，在IE8上渲染3000個矩形需要7秒的時間，Raphael.js的速度很慢。它似乎也比渲染普通div在IE8上快6倍。

Answer 1

3000事件連接的DOM對象對於一些機器來說將會非常痛苦。通常情況下，一旦進入「數千」範圍，基於DOM的解決方案（divs，SVG）的性能就會變得很差，因此確實是。用很多DOM元素獲得良好的加載時間幾乎是不可能的。

excanvas本身的性能也非常糟糕。第二部分有任何動畫，excanvas的表現變得糟糕透頂。由於excanvas只是通過製作VML（SVG）來模仿Canvas，所以它至少會比僅僅執行SVG/VML的速度慢（並且幾乎總是比較慢）。

見我的答案這裏進行了詳細的分析：HTML5 Canvas vs. SVG vs. div

我相信，你的清單上的要求，一個人得去。對象的數量，性能或平臺。

我給你的建議是如果可能的話放棄對舊版瀏覽器的支持，並使用Canvas。