JavaScript組合拼接字串的效率比較測試_javascript技巧

在腳本開發過程中，常常會依照某個規則，組合拼接出一個大字串進行輸出。例如寫腳本控制項時控制整個控制項的外觀的HTML標籤輸出，例如AJAX裡得到伺服器端的回傳值後動態分析建立HTML標籤時，不過這裡我就不討論拼接字串的具體應用了，我只是想在這裡討論一下拼接的效率。

字串的拼接在我們寫程式碼的時候都是用「 =」這個運算符，s = String; 這是我們最為熟知的寫法，不知道大家有沒有註意過沒有，在組合的字串容量有幾十K甚至幾百K的時候，劇本執行起來很慢，CPU使用率狂高，例如：

複製程式碼 程式碼如下:

    var str = "01234567891123456789212345678931234567894123456789";
        str = "51234567896123456789712345678981234567899123456789/n";
    var result = "";
    for(var i=0; i

就這麼一步操作，產生的結果字串是200K，耗時是1.1秒（這個與電腦配置有關），CPU的峰值100%。 （為了更直觀地看到效果，我多做了些循環）。可想而知就這麼一步操作就消耗了我一秒多的時間，再加上其它的程式碼的時間消耗，那整個腳本區塊的執行時間就難以忍受了。那有沒有優化的方案呢？還有其它的方法嗎？答案當然是有的，否則我寫這篇文章就是廢話。

更快的方式就是使用數組，在循環拼接的時候不是相接拼接到某個字串裡去，而是把字串放到一個數組裡，最後用數組.join("") 得到結果字串，程式碼範例：

複製程式碼 程式碼如下:

    var str = "01234567891123456789212345678931234567894123456789";
        str = "51234567896123456789712345678981234567899123456789/n";
    var result = "", a = new Array();
    for(var i=0; i     result = a.join(""); a = null;

大家可以測試測試，組合出一個相同大小的字串所消耗的時間，我這裡測試出來的結果是：

複製程式碼 程式碼如下:

字串拼接次數

 

 

最後我再說幾句，是不是以後字串拼接就一律使用陣列join呢？這個要看你的實際需求了，就普通的幾個或K級的位元組的組合就沒有必要使用數組法了，因為開數組變數也是有消耗的。若有幾K以上的字串組合，那就是陣列的效率高了。

IE 6.0:

字串拼接法：拼接後的大字串長 1010000字節，拼接耗時 22089毫秒！
陣列賦值join法：拼接後的大字串長 1010000字節，拼接耗時 218毫秒！

Firefox 1.0:

字串拼接法：拼接後的大字串長 1010000字節，拼接耗時 1044毫秒！
陣列賦值join法：拼接後的大字串長 1010000字節，拼接耗時 1044毫秒！

Mozilla 1.7:

字串拼接法：拼接後的大字串長 1010000字節，拼接耗時 1045毫秒！
陣列賦值join法：拼接後的大字串長 1010000字節，拼接耗時 1044毫秒！

Netscape 7.0:

字串拼接法：拼接後的大字串長 1010000字節，拼接耗時 10273毫秒！
陣列賦值join法：拼接後的大字串長 1010000字節，拼接耗時 1138毫秒！

Opera 7.54:

字串拼接法：拼接後的大字串長 1010000字節，拼接耗時 6968毫秒！
陣列賦值join法：拼接後的大字串長 1010000字節，拼接耗時 6922毫秒！

循環10000次的測試結果顯示在IE和Netscape裡可以大大提高效率，而在Firefox Mozilla Opera 裡兩種方法耗時基本相近，這些數據足可以判定數組join法優於傳統字符串拼接。