JavaScript 字串拼接效能分析小記

JavaScript 中,我們經常會因為各種各樣的原因去拼接字串，可能是為了Html的呈現，可能是為了屬性的設定，也可能僅僅是為了輸出調試日誌。

　　每次拼接字串的時候，我們很自然地去考慮它的效能，是不是str=str+a是不是和str+=a效能一樣，使用數組Join是不是會更快一些，哪一種才是最好的實現。

的確，我們有諸多方式去拼接字串，下面本文將會將主流字串拼接方逐一進行效能評測。

公平起見，我們的測試都是跑在各瀏覽器的最後一個正式發布版本上，即IE9 ，Chrome19，FF13 及Opera12。

為了測試，我們先構造一個 data,它有個成員，是個100大小的數組。

   1: var length = 100; 

   2: var data = { list: [] }; 

   3: for (var i = 0; i < length; i ++) { 

   4:     data.list.push({ 

   5:         str1: 'chsword, 鄒健, Zou Jian ', 

   6:         str2: 'http://chsword.cnblogs.com', 

   7:         str3: 'http://www.chsword.net', 

   8:         str4: '"http://weibo.com/chsword","http://t.qq.com/chsword"', 

   9:         str5: 'test' 

  10:     }); 

  11: }; 

準備好了，那麼我們來進行測試，我選定了8種字串拼接的方法，然後每一種運行1W次的字串拼接，每一次拼接將元素的五個子項目拼接在一起：

1.str+=str+a;
2.str=str.concat(a);

3.arr.push(a); and arr.join(“”);

4.str=str.concat(a,b,c,d,e);

5.str=str+a;

6.str=String.prototype.concat(str,a,b,c,d,e);

7.str=String.prototype.concat.apply(s, [a,b,c,d,e]);

8.str=String.prototype.concat(str,a);
9.arr[arr.length]=a

我將以上測試回合在這些瀏覽器上: IE 9, Chrome 19, Firefox 13, Opera 12.

結果為:

註：圖表中單位為MS，標記為2000的都是運行了1分鐘以上還未停止的。

通過圖表，我們可以看到+=的效能在主流瀏覽器中平均最高，不過，要說明一點，+=操作在IE早期版本中，效能較差。

Array.Join 來拼接字串，在FF和Chrome中都比+=方法慢上數倍。

另外，還有像String.prototype.concat(str,a,b,c,d,e)這樣的操作，如果在Chrome及Opera中大量執行的話，會直接令頁面掛掉，所以這些都是不推薦使用的

總結一下，總體看來+=的效能最高，早先的瀏覽器中，使用Array.Join效能會較高

測試代碼 :

1.使用 += 

   1: var str=""; 

   2: for (var i = 0; i < number; i ++) { 

   3:     for(var j=0;j<length;j++){ 

   4:         str+=data.list[j].str1; 

   5:         str+=data.list[j].str2;

   6:         str+=data.list[j].str3;

   7:         str+=data.list[j].str4;

   8:         str+=data.list[j].str5;

   9:     } 

  10:     str+="\n"; 

  11: } 

2.str.concat

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str=str.concat(data.list[j].str1); 

   5:         str=str.concat(data.list[j].str2); 

   6:         str=str.concat(data.list[j].str3); 

   7:         str=str.concat(data.list[j].str4); 

   8:         str=str.concat(data.list[j].str5); 

   9:     } 

  10:     str=str.concat( "\n"); 

  11: } 

3.Use Array Join  

   1: var arr=[]; 

   2: for (var i = 0; i < number; i ++) { 

   3:     for(var j=0;j<length;j++){ 

   4:         arr.push(data.list[j].str1); 

   5:         arr.push(data.list[j].str2); 

   6:         arr.push(data.list[j].str3); 

   7:         arr.push(data.list[j].str4); 

   8:         arr.push(data.list[j].str5); 

   9:     } 

  10:     arr.push("\n"); 

  11: } 

  12: arr.join(""); 

4.str=str.concat(a,b,c,d,e);  

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str = str.concat(data.list[j].str1 

   5:         ,data.list[j].str2 

   6:         ,data.list[j].str3 

   7:         ,data.list[j].str4 

   8:         ,data.list[j].str5); 

   9:     } 

  10:     str = str.concat("\n"); 

  11: } 

5.str=str+a

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str = str + data.list[j].str1; 

   5:         str = str + data.list[j].str2; 

   6:         str = str + data.list[j].str3; 

   7:         str = str + data.list[j].str4; 

   8:         str = str + data.list[j].str5; 

   9:     } 

  10:     str = str + "\n"; 

  11: } 

6.str=String.prototype.concat(str,a,b,c,d,e)

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str = String.prototype.concat(str,data.list[j].str1, 

   5:         data.list[j].str2, 

   6:         data.list[j].str3, 

   7:         data.list[j].str4, 

   8:         data.list[j].str5); 

   9:     } 

  10:     str = String.prototype.concat(str,"\n"); 

  11: } 

7.str=String.prototype.concat.apply(s, [a,b,c,d,e])

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str = String.prototype.concat.apply(str, [data.list[j].str1, 

   5:         data.list[j].str2, 

   6:         data.list[j].str3, 

   7:         data.list[j].str4, 

   8:         data.list[j].str5]); 

   9:     } 

  10:     str =String.prototype.concat.apply(str,["\n"]); 

  11: } 

8.str=String.prototype.concat(str,a)

   1: var str = ""; 

   2: for (var i = 0; i < number; i++) { 

   3:     for (var j = 0; j < length; j++) { 

   4:         str = String.prototype.concat.call(str,data.list[j].str1); 

   5:         str = String.prototype.concat.call(str,data.list[j].str2); 

   6:         str = String.prototype.concat.call(str,data.list[j].str3); 

   7:         str = String.prototype.concat.call(str, data.list[j].str4); 

   8:         str = String.prototype.concat.call(str,data.list[j].str5); 

   9:     } 

  10:     str = String.prototype.concat(str, "\n"); 

  11: } 

9.arr[arr.length]

 1 var arr=[]; 2             for (var i = 0; i < number; i ++) {             3                 for(var j=0;j<length;j++){ 4                     arr[arr.length]=data.list[j].str1; 5                     arr[arr.length]=data.list[j].str2; 6                     arr[arr.length]=data.list[j].str3; 7                     arr[arr.length]=data.list[j].str4; 8                     arr[arr.length]=data.list[j].str5; 9                 }10                 arr[arr.length]="\n";11             }12             arr.join("");