——點的實現與速度測試
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.測試成功。
|
