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

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

複製代碼 代碼如下:

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

這段代碼耗時14.325秒，結果並不理想。現在我們將代碼改為如下的形式：
測試代碼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;
}