探討js字串數組拼接的效能問題_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');

有關js字串陣列連接的效能比較，就介紹到這裡了，希望對大家有幫助。