html - SVG rect vs div vs canvas

Question

试想一下，为拥有 3000 个房间的大型建筑平面图构建 Google 地图。

我需要显示多达 3000 个矩形（最好也能够渲染随机多边形，但在这一点上，这不是最大的问题）。它们中的每一个都应该附加事件，例如鼠标悬停和单击，这将对页面上的其他 dom 元素产生一些影响。我还需要能够放大和缩小。

我知道我可以使用 SVG (Raphael.js)、普通的 div 渲染或画布来做到这一点。

我想知道是否有人对我正在尝试构建的内容提出具体建议。它需要在最慢的浏览器上渲染得足够快（大约 1 秒左右）。（IE8、Firefox 3.6 和希望 IE7，尽管我并没有做太多的梦想......）

谢谢你的帮助，尼古拉斯。

PS：到目前为止，我体验过在 IE8 上使用 Raphael.js 渲染 3000 个矩形最多需要 7 秒，这相当慢。在 IE8 上渲染普通 div 似乎也快了 6 倍。

Answer 1

3000 个带有事件的 DOM 对象对于某些机器来说处理起来会非常痛苦。通常，一旦进入“数千”范围，基于 DOM 的解决方案（div、SVG）的性能就会变得非常糟糕。使用这么多 DOM 元素几乎不可能获得良好的加载时间。

excanvas 本身的性能也很差。第二个是任何动画，excanvas 的表现变得很糟糕。由于 excanvas 只是通过制作 VML (SVG) 来模仿 Canvas，因此它至少与单独制作 SVG/VML 一样慢（而且几乎总是慢）。

在这里查看我的答案以获得详细分析：HTML5 Canvas vs. SVG vs. div

我相信您清单上的一项要求必须满足。对象的数量、性能或平台。

我对您的建议是尽可能放弃对旧版浏览器的支持并使用 Canvas。