JavaScript組合拼接字符串的效率對(duì)比測試
在腳本開發(fā)過程中，經(jīng)常會(huì)按照某個(gè)規(guī)則，組合拼接出一個(gè)大字符串進(jìn)行輸出。比如寫腳本控件時(shí)控制整個(gè)控件的外觀的HTML標(biāo)簽輸出，比如AJAX里得到服務(wù)器端的回傳值后動(dòng)態(tài)分析創(chuàng)建HTML標(biāo)簽時(shí)，不過這里我就不討論拼接字符串的具體應(yīng)用了，我只是想在這里討論一下拼接的效率。
字符串的拼接在我們寫代碼的時(shí)候都是用“+=”這個(gè)運(yùn)算符，s += String; 這是我們最為熟知的寫法，不知道大家有沒有注意過沒有，在組合的字符串容量有幾十K甚至幾百K的時(shí)候，腳本執(zhí)行起來很慢，CPU使用率狂高，例如：
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "";
for(var i=0; i<2000; i++) result += str;
就這么一步操作，產(chǎn)生的結(jié)果字符串是200K，耗時(shí)是1.1秒（這個(gè)與電腦配置有關(guān)），CPU的峰值100%。（為了更直觀地看到效果，我多做了些循環(huán)）?？上攵瓦@么一步操作就消耗了我一秒多的時(shí)間，再加上其它的代碼的時(shí)間消耗，那整個(gè)腳本塊的執(zhí)行時(shí)間就難以忍受了。那有沒有優(yōu)化的方案呢？還有其它的方法嗎？答案當(dāng)然是有的，否則我寫這篇文章就是廢話。
更快的方式就是使用數(shù)組，在循環(huán)拼接的時(shí)候不是相接拼接到某個(gè)字符串里去，而是把字符串放到一個(gè)數(shù)組里，最后用數(shù)組.join("") 得到結(jié)果字符串，代碼示例：
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
大家可以測試測試，組合出一個(gè)相同大小的字符串所消耗的時(shí)間，我這里測試出來的結(jié)果是：<15毫秒，請(qǐng)注意，它的單位是毫秒，也就是說組合出這么一個(gè)200K的字符串，兩種模式的時(shí)間消耗是差不多兩個(gè)數(shù)量級(jí)。這意味著什么？意味著后者已經(jīng)工作結(jié)束吃完中飯回來，前者還在做著苦力。我寫一個(gè)測試頁面，大家可以把下面這些代碼拷貝下來另存為一個(gè)HTM文件在網(wǎng)頁里打開自己來測試一下兩者之間的效率差，反正我測試的是前者要半分鐘才能完成的事，后者0.07秒就搞定了（循環(huán)10000次）。
<body>
字符串拼接次數(shù)<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="數(shù)組賦值join法" onclick="method2()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//這個(gè)被拼接的字符串長是100字節(jié) author: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
//方法一
function method1()
{
var result = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
for(var i=0; i<totle; i++)
{
result += str;
}
document.getElementById("show").value = result;
var s = "字符串拼接法：拼接后的大字符串長 "+ result.length +"字節(jié)，"+
"拼接耗時(shí) "+ (new Date().getTime()-n) +"毫秒！";
document.getElementById("method1").innerHTML = s;
}
//方法二
function method2()
{
var result = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
var a = new Array();
for(var i=0; i<totle; i++)
{
a[i] = str;
}
result = a.join(""); a=null;
document.getElementById("show").value = result;
var s = "數(shù)組賦值join法：拼接后的大字符串長 "+ result.length +"字節(jié)，"+
"拼接耗時(shí) "+ (new Date().getTime()-n) +"毫秒！";
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
最后我再說幾句，是不是以后字符串拼接就一律使用數(shù)組join呢？這個(gè)要看你的實(shí)際需求了，就普通的幾個(gè)或者K級(jí)的字節(jié)的組合就沒有必要使用數(shù)組法了，因?yàn)殚_數(shù)組變量也是有消耗的。若有幾K以上的字符串組合，那就是數(shù)組的效率高了。
IE 6.0:
字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 22089毫秒！
數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 218毫秒！
Firefox 1.0:
字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 1044毫秒！
數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 1044毫秒！
Mozilla 1.7:
字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 1045毫秒！
數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 1044毫秒！
Netscape 7.0:
字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 10273毫秒！
數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 1138毫秒！
Opera 7.54:
字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 6968毫秒！
數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時(shí) 6922毫秒！
循環(huán)10000次的測試結(jié)果表明在IE和Netscape里可以大大提高效率，而在Firefox Mozilla Opera 里兩種方法耗時(shí)基本相近，這些數(shù)據(jù)足可以判定數(shù)組join法優(yōu)于傳統(tǒng)字符串拼接。
相關(guān)文章
TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解
這篇文章主要為大家介紹了TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
javascript 動(dòng)態(tài)創(chuàng)建表格
這篇文章主要介紹了javascript 動(dòng)態(tài)創(chuàng)建表格,需要的朋友可以參考下2015-01-01
uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題簡單步驟
uniapp作為一款開源軟件,可以做到一端多用,不過也有局限,在開發(fā)中有時(shí)候需要?jiǎng)討B(tài)的去修改標(biāo)題,下面這篇文章主要給大家介紹了關(guān)于uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)百度登錄窗口拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果的相關(guān)資料,需要的朋友可以參考下2016-04-04
移動(dòng)端如何用下拉刷新的方式實(shí)現(xiàn)上拉加載
這篇文章主要介紹了移動(dòng)端如何用下拉刷新的方式實(shí)現(xiàn)上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Array.prototype.slice.apply的使用方法
arguments在JavaScript語法中是函數(shù)特有的一個(gè)對(duì)象屬性(Arguments對(duì)象)，用來引用調(diào)用該函數(shù)時(shí)傳遞的實(shí)際參數(shù)。2010-03-03
迅速了解一下ES10中Object.fromEntries的用法使用
這篇文章主要介紹了迅速了解一下ES10中Object.fromEntries的用法使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
jquery實(shí)現(xiàn)select下拉框美化特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)select下拉框美化特效,實(shí)現(xiàn)效果簡潔大方，推薦給大家，有需要的小伙伴可以參考下。2015-08-08