SVG 矩形、div 和画布
试想一下，为一座拥有 3000 个房间的大型建筑平面图构建 Google 地图。
我需要显示最多 3000 个矩形（最好是还能够渲染随机多边形，但此时，这不是最大的问题）。它们中的每一个都应该附加事件，例如鼠标悬停和单击，这将对页面上的其他 dom 元素产生一些影响。我还需要能够放大和缩小。
我知道我可以使用 SVG (Raphael.js)、普通 div 渲染或画布来做到这一点。
我想知道是否有人对我正在尝试构建的内容提出具体建议。它需要在最慢的浏览器上渲染得足够快（大约 1 秒左右）。 （IE8，Firefox 3.6，希望是 IE7，即使我没有梦想太多......）
感谢您的帮助， 尼古拉斯.
PS：到目前为止，我体验到用 Raphael.js 在 IE8 上渲染 3000 个矩形最多需要 7 秒，相当慢。在 IE8 上渲染普通 div 的速度似乎快了 6 倍。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于某些机器来说，处理 3000 个附加事件的 DOM 对象将是非常痛苦的。一般来说，一旦进入“数千”范围，基于 DOM 的解决方案（div、SVG）的性能就会变得非常很差。使用如此多的 DOM 元素获得良好的加载时间几乎是不可能的。
excanvas本身的性能也确实很糟糕。第二个有任何动画，excanvas 的性能就会变得很糟糕。由于 excanvas 只是通过制作 VML (SVG) 来模仿 Canvas，因此它至少会比单独制作 SVG/VML 一样慢（而且几乎总是更慢）。
请参阅我的答案以获取详细分析： HTML5 Canvas vs. SVG vs. div
我相信您清单上的要求之一必须取消。对象的数量、性能或平台。
我对您的建议是，如果可能的话，放弃对旧版浏览器的支持，并使用 Canvas。
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.