您的位置：首页 > 其它

几种web矢量图形的简单性能比较(2)

2010-02-22 10:23 337 查看
再来是比较svg。

浏览器：

IE不支持svg,需要安装插件。分别使用了adobe的svgviewer3.0和6.0。

opera自身支持svg。

测试方案:

IE+SVG(3.0/6.0):svg性能测试.htm。IE分别安装svg3.0/6.0插件。比较遗憾的是,adobe不再提供svg的插件开发，所以IE对svg的支持只能停留在现有状况，或者等IE以后原生支持svg了。从测试结果看，svg的性能要好于VML，大约是1~2倍。尤其是对line的处理要快于vml。
IE+SVG(3.0/6.0):svg性能测试1.htm。由于adobe 的插件和opera的原生支持方式略有不同。所以在测试程序中针对不同浏览器进行了最简单的封装，力争不影响性能。从测试结果看，js带来的影响微乎其微，可以忽略。
IE+rapheal：svg性能o.htm。rapheal是opera论坛上推荐的跨浏览器脚本。在IE上通过vml实现，在opera上通过svg 实现。脚本本身的封装比较通用。但是rapheal不支持line，只能用path代替。从测试结果看，js的通用封装对性能的影响相当明显。不过path的性能看起来反而比rect要好一些。
Opeara+svg：svg性能测试1.htm。这个和IE的测试页面是通用的。只是针对不同浏览器进行了简单的封装和分支处理。从测试结果看，和IE+svg 的性能也差不多。
Opera+rapheal :svg性能测试o.htm由于opera对svg的支持api变了，所以尝试使用rapheal.js。从测试结果看，比原生的svg慢了3倍左右。而且其中的line用path代替，性能要更差一些

附：
测试源码:
<!-- svg性能1.html
1.单纯测试画矩形和画线的性能
2.兼容ie和opera.ie用embed,opera用create
-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
svg性能测试
</title>
</head>

<mce:script type="text/javascript"><!--
var isIE=false;
function checkBrowser(){
return navigator.appName == "Microsoft Internet Explorer";
}
isIE=checkBrowser();

var svg;
function getSVGDocument(){
var result=null;
if(isIE){
try{
result=document.getElementById("svg1").getSVGDocument();
}catch(e){
alert(e+" may be svg embed not init");
}
}else{

result=svg.ownerDocument;
}
return result;
}

function show(){
var st=new Date().getTime();
//20*20  47,47(47,47)  31，31
//20*30  62,63
//30*30  94,109
//50*50  297,328(312,297)  297，344
//60*60  406,422
var m=50;
var n=50;

//动态设置画布的大小
var h=n*40+100;
var w=m*40+100;
if(isIE){
svg=document.getElementById("svg1");
svg.style.width=w;
svg.style.height=h;
}
else{

svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute("height",h);
svg.setAttribute("width",w);
document.body.appendChild(svg);

var g=document.createElementNS('http://www.w3.org/2000/svg','g');
g.setAttribute("id","g1");
svg.appendChild(g);
}

for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var tmpid=i*n+j;
createrect(i*40+100,j*40+100,tmpid);

}
}

var st2=new Date().getTime()
var tt1=st2 - st;

for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var tmpid=i*n+j;

var xa;
var xb;
var ya;
var yb;
xa=i*40+100;
ya=j*40+100;
xb=i*40+140;
yb=j*40+140;
var from;
var to;
from=xa+","+ya;
to=xb+","+yb;
createline(xa,ya,xb,yb);
}
}

var st3=new Date().getTime()
var tt2=st3 - st2;
alert("执行rect时间为"+tt1+"毫秒");
alert("执行line时间为"+tt2+"毫秒");
}

function createsvg(svgdoc,shape){
if(isIE){
newRect=svgdoc.createElement(shape);
}
else{
newRect=document.createElementNS('http://www.w3.org/2000/svg',shape);
}
return newRect;
}
curentStyle="stroke:black;fill:white";
function createrect(x,y,v){
var SvgMainDoc = getSVGDocument();
plat=SvgMainDoc.getElementById('g1');
//alert(plat.id);
var newRect;
newRect=createsvg(SvgMainDoc,'rect');

newRect.setAttribute("x",x);
newRect.setAttribute("y",y);
newRect.setAttribute("width","40");
newRect.setAttribute("height","40");
newRect.setAttribute("style",curentStyle);
//svg.appendChild(newRect);
plat.appendChild(newRect);

}

function createline(x1,y1,x2,y2){
var SvgMainDoc = getSVGDocument();
plat=SvgMainDoc.getElementById('g1');
//alert(plat.id);
var newRect;
newRect=createsvg(SvgMainDoc,'line');

newRect.setAttribute("x1",x1);
newRect.setAttribute("y1",y1);
newRect.setAttribute("x2",x2);
newRect.setAttribute("y2",y2)
newRect.setAttribute("style",curentStyle);
plat.appendChild(newRect);

}
// --></mce:script>

<body bgcolor="#ffffff">

<button onclick="show()">开始</button>
<embed name="svg1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="empty.svg" mce_src="empty.svg" height=10 width=10 type="image/svg+xml">

</body>
</html>


对于IE，需要使用embed方式，而且需要一个空的svg文件
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="g1">

</g>
</svg>

使用rapheal.js的源码
<!-- svg性能.html
1.单纯测试画矩形和画线的性能
2.svg本身不能创建。需要先创建一个空的
-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
svg性能测试opera
</title>
<mce:script src="raphael.js" mce_src="raphael.js" type="text/javascript"></mce:script>
</head>

<mce:script type="text/javascript"><!--
var paper;
function show(){
paper = Raphael(0, 0, 800, 600);

var st=new Date().getTime();
//20*20  47,47
//20*30  62,63
//30*30  94,109
//50*50  281,281
//60*60  703,516
var m=50;
var n=50;
for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var tmpid=i*n+j;
createrect(i*40+100,j*40+100,tmpid);

}
}

var st2=new Date().getTime()
var tt1=st2 - st;

for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var tmpid=i*n+j;

var xa;
var xb;
var ya;
var yb;
xa=j*40+100;
ya=i*40+100;
xb=j*40+140;
yb=i*40+140;
var from;
var to;
from=xa+","+ya;
to=xb+","+yb;
createline(xa,ya,xb,yb);
}
}

var st3=new Date().getTime()
var tt2=st3 - st2;
alert("执行rect时间为"+tt1+"毫秒");
alert("执行line时间为"+tt2+"毫秒");
}

function createrect(x,y,v){

var circle = paper.rect(x, y, 40,40);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "white");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "black");

}

function createline(x1,y1,x2,y2){
var circle = paper.path("M"+x1+" "+y1+"L"+x2+" "+y2);
//var strp="M"+x1+" "+y1+"L"+x2+" "+y2;
//alert(strp);
//var circle = paper.path("M10 10L90 90");
// Sets the fill attribute of the circle to red (#f00)
//circle.attr("fill", "white");

// Sets the stroke attribute of the circle to white
//circle.attr("stroke", "black");

}
// --></mce:script>

<body bgcolor="#ffffff">

<div id="holder"></div>

<button onclick="show()">开始</button>

</body>
</html>


测试结果：

IE+SVG3

47
47
281
281
Opera+svg
31
31
281
312
Opera+rapheal
94
203*
890
1860
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航