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