几种web矢量的简单性能比较(1)_性能比较的矢量图-优快云博客

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/5315208

最近在研究webtop。需要用到web矢量图形技术。

目前，可用的web矢量图形的技术有

无插件：

IE:vml

FF:SVG,canvas

有插件

IE:flash,silverlight,svg

FF:flash,silverlight

对于轻量级的图形应用，可以考虑用extendcanvas来屏蔽canvas和vml的区别。

通过js,可以实现在IE中通过vml或者silverlight来模拟canvas。这样可以实现一致性。

下面需要比较一下性能。

由于webtop 主要用到的是连线，其他的矩形、文字、图像较为次要。因此性能测试主要以矩形+直线为主。

首先测试vml

IE+VML:vml性能测试.htm。vml是IE独有的技术，也不需要插件，使用也比较简单。不过网上反应性能比较差。从测试结果看，在支持2000左右图元情况下性能还可以接受（出图时间<1s）。从实际应用的情况看，在2000设备，4000连线的情况下，操作也比较流畅，拖动时没有迟滞感。

<html xmlns:v="urn:schemas-microsoft-com:vml"> <STYLE> v/:* { BEHAVIOR: url(#default#VML) } </STYLE> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> vml性能测试 </title> </head> <mce:script type="text/javascript"></mce:script> <body bgcolor="#ffffff"> <button οnclick="show()">开始</button> </body> </html>

最后的测试结果：

//20*20 109,125
//20*30 156,204

//30*30 250,328
//50*50 672,875
//60*60 1024,1344

vml可以支持的拓扑元素大约是2000个