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

2019-11-21 00:34:34

字體：大中小

來源：轉載

供稿：網友

在使用Ajax提交信息時，我可能常常需要拼裝一些比較大的字符串通過XmlHttp來完成POST提交。盡管提交這樣大的信息的做法看起來并不優雅，但有時我們可能不得不面對這樣的需求。那么JavaScript中對字符串的累加速度如何呢？我們先來做下面的這個實驗。累加一個長度為30000的字符串。
測試代碼1 - 耗時: 14.325秒

復制代碼代碼如下:

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

這段代碼耗時14.325秒，結果并不理想?，F在我們將代碼改為如下的形式：
測試代碼2 - 耗時: 0.359秒

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
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); 

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

復制代碼代碼如下:

 
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; 
} 