JavaScript字串數組拼接的效能

傳統上，字串串連一直是js中效能最低的操作之一。

var text="Hello";
text+=" World!";

早期瀏覽器沒有對這種運算進行最佳化。由於字串是不可變的，這意味著要建立中間字串來儲存串連的結果。頻繁地在後台建立和銷毀字串導制效能異常低下。

發現這一點後，開發人員們利用數組對象進行最佳化。

var buffer=[],i=0;
buffer[i++]="Hello";    //通過相應索引值添加元素比push方法快
buffer[i++]=" World!";
var text=buffer.join("");

在早期的瀏覽器中，沒有建立和銷毀中間字串，在大量字串串連情況下，這技術已被證明遠快於使用加法方式。

如今瀏覽器對字串的最佳化已經改變了字串相連的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法運算子上表現出了更好的效能。但是，IE8之前的版本沒有最佳化，因此數組方法依然有效。這並不意味著字串相連時我們要進行瀏覽器檢測。在決定如何串連時要考慮的是字串的大小和數量。

當字串相對較小（小於20字元）且串連數量也較小時(小於1000個），所有的瀏覽器使用加法運算子都能在不到1毫秒內輕鬆完成串連。增加字串數量或大小時，IE7中效能會明顯下降。字串大小增加時，Firefox中加法運算子和數組成技巧效能差異會變小。字串數量增加時，Safari中加法運算子和數組成技巧效能差異會變小。改變字串數量或大小時，Chrome和Opera中加法運算子一直保持領先優勢。

所以，由於在各瀏覽器下效能不一致，選用技術取決於實際情況和面對的瀏覽器。

大多數情況下，加法運算子是首選；如果使用者主要使用IE6或7，並且字串大小較大或數量較多時，那麼數組技術就很值得。

一般情況下，如果是語義性的字串，不應該使用Array，比如

'Hello, my name is ' + name;

如果字串是"相似情況的重複"的話，建議使用Array，比如

var array = [];
for (i = 0; i < length; i++) {
array[i] = '<li>' + list[i] + '</li'>;
}
document.getElementById('somewhere').innerHTML = array.join('\n');