首頁 > web前端 > js教程 > 探討js字串數組拼接的效能問題_javascript技巧

探討js字串數組拼接的效能問題_javascript技巧

WBOY
發布: 2016-05-16 16:34:19
原創
1353 人瀏覽過

我們知道,在js中,字串連接是效能最低的操作之一。
例如:

複製程式碼 程式碼如下:

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

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

因此,可以利用陣列物件進行最佳化。
例如:

1

2

3

4

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,例如:

1

2

3

4

5

var array = [];

for (i = 0; i < length; i++) {

array[i] = '<li>' + list[i] + '</li'>;

}

document.getElementById('somewhere').innerHTML = array.join('\n');

登入後複製

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板