Nic*_* M. 6 html svg canvas raphael excanvas
想象一下,为拥有3000间客房的大型楼宇平面图构建Google地图.
我需要显示多达3000个矩形(最好的也是能够渲染随机多边形,但此时,这不是最大的问题).它们中的每一个都应该附加事件,例如鼠标悬停和单击,这将对页面上的其他dom元素产生一些影响.我还需要能够放大和缩小.
我知道我可以用SVG(Raphael.js),普通div渲染或画布来做.
我想知道是否有人有具体的建议来为我想要建立的东西.它需要在最慢的浏览器上足够快地渲染(大约1秒左右).(IE8,Firefox 3.6,希望IE7,即使我没有做太多梦想......)
谢谢你的帮助,尼古拉斯.
PS:到目前为止,我经历过使用Raphael.js在IE8上渲染3000个矩形需要长达7秒,这相当慢.它似乎也比在IE8上渲染普通div快6倍.
连接事件的3000个DOM对象对于某些机器来说将是非常痛苦的.通常,一旦进入"数千"范围,基于DOM的解决方案(div,SVG)的性能就会变得非常糟糕.使用那么多DOM元素获得良好的加载时间几乎是不可能的.
excanvas本身的表现也非常糟糕.第二个是任何动画,excanvas的表现变得糟糕.因为excanvas只是通过制作VML(SVG)来模仿Canvas,所以它至少与单独使用SVG/VML一样慢(并且几乎总是更慢).
有关详细分析,请参阅我的答案:HTML5 Canvas vs. SVG vs. div
我相信你的清单上的要求之一必须要去.对象的数量,性能或平台.
我建议你尽可能放弃对旧浏览器的支持,然后选择Canvas.