——點(diǎn)的實(shí)現(xiàn)與速度測試
Ps：本文只是一菜鳥畫鴨之筆，有不對之處歡迎高手們指證!
一、背景知識：
通過搜索，網(wǎng)上關(guān)于web繪圖的實(shí)現(xiàn)大致有以下三類：
1 插件實(shí)現(xiàn)
優(yōu)點(diǎn)：功能豐富。護(hù)展性好，速度快。
缺點(diǎn)：首次訪問必須下載插件。
2 flash實(shí)現(xiàn)
優(yōu)點(diǎn)：首次訪問不需要下載插件（大部分瀏覽已經(jīng)安裝有flash插件），畫面質(zhì)量高。
缺點(diǎn)：速度較慢，需要懂得flash相關(guān)編程的知識。
3 js實(shí)現(xiàn)
優(yōu)點(diǎn)：首次訪問不需要下載插件
缺點(diǎn)：速度應(yīng)該慢于插件的實(shí)現(xiàn)（沒有測試），實(shí)現(xiàn)方法較牽強(qiáng)。
本文只介紹js實(shí)現(xiàn)。構(gòu)思參照neweroica 于2003年發(fā)布的JS2D函數(shù)集。在小學(xué)的幾何中我們就明白，繪圖平面由線構(gòu)成，而線是由點(diǎn)構(gòu)成，所以，只要我們解決了點(diǎn)的繪制，則線，面只是一個循序漸進(jìn)的過程。
二、思路解析：
在newerroica的JS2D函數(shù)集中，點(diǎn)的繪制是通過table標(biāo)簽來實(shí)現(xiàn)的。也就是繪制一個無邊框，無填充，一個單元格的表格，來實(shí)現(xiàn)點(diǎn)的顯示。點(diǎn)的顏色、大小、位置則由table標(biāo)簽的style屬性來定義。代碼如下：
//Dottable.js
1/**//************* 畫點(diǎn) **************
2 x,y 點(diǎn)所在的屏幕坐標(biāo)（像素）
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}
我的改進(jìn)思路是，如果table可以實(shí)現(xiàn)，那么div是否同樣可以實(shí)現(xiàn)，并且能夠達(dá)到更快的速度呢，我簡單的修改代碼如下：
//Dotdiv.js
1/**//**********畫點(diǎn)***********
2x,y 點(diǎn)的坐標(biāo)(像素)
3color 點(diǎn)的顏色（字符串值）
4size 點(diǎn)在大小(像素)
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() 結(jié)束計時并輸出時間
4
5*********************************/
6var ms;
7//開始計時
8function starttime() {
9 then = new Date();
10 ms= then.getTime();
11
12}
13
14//結(jié)束計時
15function endtime() {
16 now = new Date();
17 ms=now.getTime()-ms;
18 ms=ms/1000;
19 alert("共用時:"+ms+"秒");
20}
三、測試
構(gòu)建測試用例，我們用兩種方法，分別沿45度畫5百個點(diǎn)，分別對所用時間計數(shù):
Ps:我的機(jī)器配置：方正t3200c筆記本電腦，p41.5的cpu，內(nèi)存384M。
Table實(shí)現(xiàn)的測試用例代碼：
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>
運(yùn)行后返回時間：0.27秒
Div實(shí)現(xiàn)的測試用例代碼：
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>
運(yùn)行后返回時間：0.11秒
顯然，div的運(yùn)行時間明顯快于table.測試成功。
|
