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秒
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
這段代碼耗時(shí)14.325秒，結(jié)果并不理想。現(xiàn)在我們將代碼改為如下的形式：
測(cè)試代碼2 - 耗時(shí): 0.359秒
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秒
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ì)象為我們組裝字符串。下面這段代買組裝一個(gè)長(zhǎng)度為950015的字符串僅須耗時(shí)0.890秒。
利用DOM對(duì)象組裝信息 - 耗時(shí): 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;
}
測(cè)試代碼1 - 耗時(shí): 14.325秒
復(fù)制代碼 代碼如下:
var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}
這段代碼耗時(shí)14.325秒，結(jié)果并不理想。現(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ì)象為我們組裝字符串。下面這段代買組裝一個(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;
}
相關(guān)文章
24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題(小結(jié))
這篇文章主要介紹了24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
基于原生JavaScript實(shí)現(xiàn)SPA單頁(yè)應(yīng)用
單頁(yè)Web應(yīng)用?（single?page?web?application，SPA）?，就是只有一張Web頁(yè)面的應(yīng)用，是加載單個(gè)HTML?頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。本文將利用原生JS實(shí)現(xiàn)SPA單頁(yè)應(yīng)用，需要的可以參考一下2023-03-03
這篇文章主要介紹了gulp構(gòu)建小程序的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)
這篇文章主要介紹了ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫功能
這篇文章主要介紹了JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
數(shù)組 重復(fù)采用的是Object的 in 操作符，體現(xiàn)一把它的強(qiáng)大（有更好的辦法來(lái)實(shí)現(xiàn)這個(gè)功能，但是這里只是演示 in 操作符）！2008-03-03
javascript實(shí)現(xiàn)表格排序 編輯 拖拽 縮放
這篇文章主要介紹了javascript實(shí)現(xiàn)表格排序 編輯 拖拽 縮放的方法，效果非常不錯(cuò)，只是兼容性還有些問(wèn)題，有待優(yōu)化。2015-01-01
利用JavaScript為句子加標(biāo)題的3種方法示例
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript為句子加標(biāo)題的3種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯?wèn)題及解決方法，本文給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02