Js绘图研究(一)
——点的实现与速度测试
Ps:本文只是一菜鸟画鸭之笔,有不对之处欢迎高手们指证!

一、背景知识:
   通过搜索,网上关于web绘图的实现大致有以下三类:
1 插件实现
     优点:功能丰富。护展性好,速度快。
     缺点:首次访问必须下载插件。
2 flash实现
     优点:首次访问不需要下载插件(大部分浏览已经安装有flash插件),画面质量高。
     缺点:速度较慢,需要懂得flash相关编程的知识。
3 js实现
     优点:首次访问不需要下载插件
     缺点:速度应该慢于插件的实现(没有测试),实现方法较牵强。
本文只介绍js实现。构思参照neweroica 于2003年发布的JS2D函数集。在小学的几何中我们就明白,绘图平面由线构成,而线是由点构成,所以,只要我们解决了点的绘制,则线,面只是一个循序渐进的过程。

二、思路解析:
 在newerroica的JS2D函数集中,点的绘制是通过table标签来实现的。也就是绘制一个无边框,无填充,一个单元格的表格,来实现点的显示。点的颜色、大小、位置则由table标签的style属性来定义。代码如下:
//Dottable.js

 

1}


我的改进思路是,如果table可以实现,那么div是否同样可以实现,并且能够达到更快的速度呢,我简单的修改代码如下:
//Dotdiv.js

1}

那么div是否真的比table快呢?我做了个简单的js测试程序段,这个程序段同样可用于更多的js脚本性能测试,代码如下:
//timer.js

 1}

三、测试
构建测试用例,我们用两种方法,分别沿45度画5百个点,分别对所用时间计数:
Ps:我的机器配置:方正t3200c笔记本电脑,p41.5的cpu,内存384M。
Table实现的测试用例代码:

 1js绘图研究(一)<html>
 2js绘图研究(一)<head>
 3js绘图研究(一)</head>
 4js绘图研究(一)<body>
 5js绘图研究(一)<script src="timer.js">
 6js绘图研究(一)</script>
 7js绘图研究(一)<script src="dottable.js">
 8js绘图研究(一)</script>
 9js绘图研究(一)
10js绘图研究(一)
11>

运行后返回时间:0.27秒
Div实现的测试用例代码:

 1js绘图研究(一)<html>
 2js绘图研究(一)<head>
 3js绘图研究(一)</head>
 4js绘图研究(一)<body>
 5js绘图研究(一)<script src="timer.js">
 6js绘图研究(一)</script>
 7js绘图研究(一)<script src="dotdiv.js">
 8js绘图研究(一)</script>
 9js绘图研究(一)
10js绘图研究(一)
11>

运行后返回时间:0.11秒

显然,div的运行时间明显快于table.测试成功。

未完待续

 

相关文章:

  • 2021-07-07
  • 2021-11-20
  • 2021-04-25
  • 2021-12-07
  • 2021-11-16
  • 2022-12-23
  • 2021-11-30
  • 2021-12-10
猜你喜欢
  • 2021-10-06
  • 2021-08-17
  • 2021-08-20
  • 2021-10-01
相关资源
相似解决方案