快捷導(dǎo)航

JS下高效拼裝字符串的幾種方法比較與測(cè)試代碼

更新時(shí)間：2010年04月15日 00:02:49 作者：

本文介紹一下js如何高效來(lái)拼裝字符串的方法，希望大家看了以后多用效率高的代碼，不要讓客戶端瀏覽器執(zhí)行的太慢，提高用戶體驗(yàn)。

在使用Ajax提交信息時(shí)，我可能常常需要拼裝一些比較大的字符串通過(guò)XmlHttp來(lái)完成POST提交。盡管提交這樣大的信息的做法看起來(lái)并不優(yōu)雅，但有時(shí)我們可能不得不面對(duì)這樣的需求。那么JavaScript中對(duì)字符串的累加速度如何呢？我們先來(lái)做下面的這個(gè)實(shí)驗(yàn)。累加一個(gè)長(zhǎng)度為30000的字符串。
測(cè)試代碼1 - 耗時(shí): 14.325秒

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

 
var str = ""; 
for (var i = 0; i < 50000; i++) { 
str += "xxxxxx"; 
} 

這段代碼耗時(shí)14.325秒，結(jié)果并不理想?，F(xiàn)在我們將代碼改為如下的形式：
測(cè)試代碼2 - 耗時(shí): 0.359秒

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

 
var str = ""; 
for (var i = 0; i < 100; i++) { 
var sub = ""; 
for (var j = 0; j < 500; j++) { 
sub += "xxxxxx"; 
} 
str += sub; 
} 

這段代碼耗時(shí)0.359秒！同樣的結(jié)果，我們做的只是首先拼裝一些較小的字符串然后再組裝成更大的字符串。這種做法可以有效的在字符串拼裝的后期減小內(nèi)存復(fù)制的數(shù)據(jù)量。知道了這一原理之后我們還可以把上面的代碼進(jìn)一步拆散以后進(jìn)行測(cè)試。下面的代碼僅耗時(shí)0.140秒。
測(cè)試代碼3 - 耗時(shí): 0.140秒

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

 
var strArray = new Array(); 
for (var i = 0; i < 100; i++) { 
var sub = ""; 
for (var j = 0; j < 500; j++) { 
sub += "xxxxxx"; 
} 
strArray.push(sub); 
} 
str = String.prototype.concat.apply("", strArray); 

不過(guò)，上面這種做法也許并不是最好的！如果我們需要提交的信息是XML格式的（其實(shí)絕大多數(shù)情況下，我們都可以設(shè)法將要提交的信息組裝成XML格式），我們還能找能更高效更優(yōu)雅的方法—利用DOM對(duì)象為我們組裝字符串。下面這段代買(mǎi)組裝一個(gè)長(zhǎng)度為950015的字符串僅須耗時(shí)0.890秒。
利用DOM對(duì)象組裝信息 - 耗時(shí): 0.890秒

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

 
var xmlDoc; 
if (browserType == BROWSER_IE) { 
xmlDoc = new ActiveXObject("Msxml.DOMDocument"); 
} 
else { 
xmlDoc = document.createElement("DOM"); 
} 
var root = xmlDoc.createElement("root"); 
for (var i = 0; i < 50000; i++) { 
var node = xmlDoc.createElement("data"); 
if (browserType == BROWSER_IE) { 
node.text = "xxxxxx"; 
} 
else { 
node.innerText = "xxxxxx"; 
} 
root.appendChild(node); 
} 
xmlDoc.appendChild(root); 
var str; 
if (browserType == BROWSER_IE) { 
str = xmlDoc.xml; 
} 
else { 
str = xmlDoc.innerHTML; 
} 