——点的实现与速度测试 Ps:本文只是一菜鸟画鸭之笔,有不对之处欢迎高手们指证!
一、背景知识: 通过搜索,网上关于web绘图的实现大致有以下三类: 1 插件实现 优点:功能丰富。护展性好,速度快。 缺点:首次访问必须下载插件。 2 flash实现 优点:首次访问不需要下载插件(大部分浏览已经安装有flash插件),画面质量高。 缺点:速度较慢,需要懂得flash相关编程的知识。 3 js实现 优点:首次访问不需要下载插件 缺点:速度应该慢于插件的实现(没有测试),实现方法较牵强。 本文只介绍js实现。构思参照neweroica 于2003年发布的JS2D函数集。在小学的几何中我们就明白,绘图平面由线构成,而线是由点构成,所以,只要我们解决了点的绘制,则线,面只是一个循序渐进的过程。
二、思路解析: 在newerroica的JS2D函数集中,点的绘制是通过table标签来实现的。也就是绘制一个无边框,无填充,一个单元格的表格,来实现点的显示。点的颜色、大小、位置则由table标签的style属性来定义。代码如下: //Dottable.js
1/**//************* 画点 ************** 2 x,y 点所在的屏幕坐标(像素) 3 color 颜色(字符串值) 4 size 大小(像素) 5**********************************/ 6function drawDot(x,y,color,size){ 7 document.write("<table border=’0’ cellspacing=0 cellpadding=0><tr><td style=’position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"’ width="+size+" height="+size+"></td></tr></table>"); 8}
我的改进思路是,如果table可以实现,那么div是否同样可以实现,并且能够达到更快的速度呢,我简单的修改代码如下: //Dotdiv.js
1/**//**********画点*********** 2x,y 点的坐标(像素) 3color 点的颜色(字符串值) 4size 点在大小(像素) 5 6**********************/ 7function drawDot(x,y,color,size){ 8 document.write("<div style=’position: absolute; border:0;left: "+(x)+"; top: "+(y)+";background-color:"+color+"; width:"+size+"; height:"+size+"; overflow:hidden;’></div>"); 9} 那么div是否真的比table快呢?我做了个简单的js测试程序段,这个程序段同样可用于更多的js脚本性能测试,代码如下: //timer.js
1/**//***********计时器**************** 2startime() 开始计时 3endtime() 结束计时并输出时间 4 5*********************************/ 6var ms; 7//开始计时 8function starttime() { 9 then = new Date(); 10 ms= then.getTime(); 11 12} 13 14//结束计时 15function endtime() { 16 now = new Date(); 17 ms=now.getTime()-ms; 18 ms=ms/1000; 19 alert("共用时:"+ms+"秒"); 20} 三、测试 构建测试用例,我们用两种方法,分别沿45度画5百个点,分别对所用时间计数: Ps:我的机器配置:方正t3200c笔记本电脑,p41.5的cpu,内存384M。 Table实现的测试用例代码:
1<html> 2<head> 3</head> 4<body> 5<script src="timer.js"> 6</script> 7<script src="dottable.js"> 8</script> 9 10 11<script language="javascript"> 12 starttime(); 13 for(i=0;i<500;i++){ 14 drawDot(1+i,1+i,"ff0000",1); 15 } 16 17 endtime(); 18</script> 19 20</body> 21</html> 运行后返回时间:0.27秒 Div实现的测试用例代码:
1<html> 2<head> 3</head> 4<body> 5<script src="timer.js"> 6</script> 7<script src="dotdiv.js"> 8</script> 9 10 11<script language="javascript"> 12 starttime(); 13 for(i=0;i<500;i++){ 14 drawDot(1+i,1+i,"ff0000",1); 15 } 16 17 endtime(); 18</script> 19 20</body> 21</html> 运行后返回时间:0.11秒
显然,div的运行时间明显快于table.测试成功。
|