快捷導(dǎo)航

javascript string字符串優(yōu)化問(wèn)題

更新時(shí)間：2011年07月31日 20:59:38 作者：

今天看到一個(gè)很久的帖子說(shuō)string連接優(yōu)化問(wèn)題。于是自己也測(cè)試一下。寫了個(gè)很簡(jiǎn)單的代碼

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>test</title> 
<script type="text/javascript"> 
function winProps(){ 
var message = []; 
var str; 
var data = new Date(); 
var mils1 = data.getTime(); 
//array數(shù)組 
for(var i = 0; i<500000;i++) 
message.push("This window is "); 
message.join(" "); 
data = new Date(); 
var mils2 = data.getTime(); 
arrayMils = mils2 - mils1; 
//字符串直接連接 
for(var i = 0; i<500000;i++) 
str+="This window is "; 
data = new Date(); 
var mils3 = data.getTime(); 
stringMils=mils3-mils2; 
//顯示內(nèi)容，不重要 
var mes = []; 
mes.push("時(shí)間1:"); 
mes.push(mils1); 
mes.push("\n時(shí)間2"); 
mes.push(mils2); 
mes.push("\n時(shí)間3"); 
mes.push(mils3); 
mes.push("\narray所用時(shí)間"); 
mes.push(arrayMils>=0?arrayMils:arrayMils+1000); 
mes.push("\nstr連接所用時(shí)間"); 
mes.push(stringMils>=0?stringMils:stringMils+1000); 
alert(mes.join(" ")); 
} 
</script> 
</head> 
<body> 
<input type="button" value="點(diǎn)我" onclick="winProps();"/> 
</body> 

結(jié)果不像一般的說(shuō)法，用array會(huì)快。在ie9,8。ff,google,搜狗等ie核心的瀏覽器下測(cè)試了一下，確實(shí)在數(shù)量級(jí)100000以上的測(cè)試中array方法比用“+”的方法會(huì)慢。
1000000次的結(jié)果
ie第一次（大概，ie復(fù)制不了，圖就不截了）

復(fù)制代碼代碼如下:

 
array所用時(shí)間 890 
str連接所用時(shí)間 450 

ie可能是內(nèi)存沒(méi)有回收第二次點(diǎn)會(huì)彈出警告，并且時(shí)間用到1400和1200，點(diǎn)多幾次后，+=的連接方式耗時(shí)回到400，難倒是array對(duì)象沒(méi)有回收？打開任務(wù)管理器，再刷新一次ie瀏覽器，內(nèi)存降了100多m，應(yīng)該研究一下ie的javascript內(nèi)存回收機(jī)制。
ff

復(fù)制代碼代碼如下:

 
時(shí)間1: 1312102053720 
時(shí)間2 1312102053842 
時(shí)間3 1312102053882 
array所用時(shí)間 122 
str連接所用時(shí)間 40 

google（也復(fù)制不了數(shù)據(jù)）
array所用時(shí)間 200
str連接所用時(shí)間 100
opera
時(shí)間1: 1312102258270
時(shí)間2 1312102258460
時(shí)間3 1312102258592
array所用時(shí)間 190
str連接所用時(shí)間 132
順便說(shuō)一下，在數(shù)據(jù)到5000000后ff拋出了個(gè)異常，應(yīng)該是內(nèi)存溢出了。。。（ps，不是很懂）
錯(cuò)誤： uncaught exception: 8.375396749959738e-274
在ie下測(cè)試果斷警告，再后來(lái)out of memory。
當(dāng)然怎么大的數(shù)據(jù)連接，在現(xiàn)在的網(wǎng)頁(yè)是不可能出現(xiàn)，數(shù)據(jù)處理應(yīng)該是在后臺(tái)做的。老師的主機(jī)不敢裝這么多瀏覽器
其實(shí)是array的jion，太消耗時(shí)間。沒(méi)有加入這一句之后opera，google就顯示出array的優(yōu)勢(shì)：
opera結(jié)果：

復(fù)制代碼代碼如下:

 
時(shí)間1: 1312101715553 
時(shí)間2 1312101715622 
時(shí)間3 1312101715749 
array所用時(shí)間 69 
str連接所用時(shí)間 127 
[code] 
ie結(jié)果 
array所用時(shí)間700 
str連接所用時(shí)間500 
ff 
[code] 
時(shí)間1: 1312101925895 
時(shí)間2 1312101925945 
時(shí)間3 1312101925979 
array所用時(shí)間 50 
str連接所用時(shí)間 34 