JS下高效拼裝字符串的幾種方法比較與測試代碼
更新時間:2010年04月15日 00:02:49 作者:
本文介紹一下js如何高效來拼裝字符串的方法,希望大家看了以后多用效率高的代碼,不要讓客戶端瀏覽器執(zhí)行的太慢,提高用戶體驗。
在使用Ajax提交信息時,我可能常常需要拼裝一些比較大的字符串通過XmlHttp來完成POST提交。盡管提交這樣大的信息的做法看起來并不優(yōu)雅,但有時我們可能不得不面對這樣的需求。那么JavaScript中對字符串的累加速度如何呢?我們先來做下面的這個實驗。累加一個長度為30000的字符串。
測試代碼1 - 耗時: 14.325秒
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
這段代碼耗時14.325秒,結(jié)果并不理想。現(xiàn)在我們將代碼改為如下的形式:
測試代碼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秒!同樣的結(jié)果,我們做的只是首先拼裝一些較小的字符串然后再組裝成更大的字符串。這種做法可以有效的在字符串拼裝的后期減小內(nèi)存復制的數(shù)據(jù)量。知道了這一原理之后我們還可以把上面的代碼進一步拆散以后進行測試。下面的代碼僅耗時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格式的(其實絕大多數(shù)情況下,我們都可以設法將要提交的信息組裝成XML格式),我們還能找能更高效更優(yōu)雅的方法—利用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;
}
測試代碼1 - 耗時: 14.325秒
復制代碼 代碼如下:
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
這段代碼耗時14.325秒,結(jié)果并不理想。現(xiàn)在我們將代碼改為如下的形式:
測試代碼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秒!同樣的結(jié)果,我們做的只是首先拼裝一些較小的字符串然后再組裝成更大的字符串。這種做法可以有效的在字符串拼裝的后期減小內(nèi)存復制的數(shù)據(jù)量。知道了這一原理之后我們還可以把上面的代碼進一步拆散以后進行測試。下面的代碼僅耗時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格式的(其實絕大多數(shù)情況下,我們都可以設法將要提交的信息組裝成XML格式),我們還能找能更高效更優(yōu)雅的方法—利用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;
}
相關(guān)文章
24個ES6方法解決JS實際開發(fā)問題(小結(jié))
這篇文章主要介紹了24個ES6方法解決JS實際開發(fā)問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05ES6基礎之解構(gòu)賦值(destructuring assignment)
這篇文章主要介紹了ES6基礎之解構(gòu)賦值(destructuring assignment),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02javascript實現(xiàn)表格排序 編輯 拖拽 縮放
這篇文章主要介紹了javascript實現(xiàn)表格排序 編輯 拖拽 縮放的方法,效果非常不錯,只是兼容性還有些問題,有待優(yōu)化。2015-01-01js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯栴}及解決方法,本文給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02