探討js字符串數(shù)組拼接的性能問題
我們知道,在js中,字符串連接是性能最低的操作之一。
例如:
var text="Hello";
text+=" World!";
早期瀏覽器沒有對這種運算進行優(yōu)化。
由于字符串是不可變的,這意味著要創(chuàng)建中間字符串來存儲連接的結(jié)果。頻繁地在后臺創(chuàng)建和銷毀字符串導制性能異常低下。
因此,可以利用數(shù)組對象進行優(yōu)化。
例如:
var buffer=[],i=0;
buffer[i++]="Hello"; //通過相應(yīng)索引值添加元素比push方法快
buffer[i++]=" World!";
var text=buffer.join("");
在早期的瀏覽器中,沒有創(chuàng)建和銷毀中間字符串,在大量字符串連接情況下,這技術(shù)已被證明遠快于使用加法方式。
如今瀏覽器對字符串的優(yōu)化已經(jīng)改變了字符串相連的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法運算符上表現(xiàn)出了更好的性能。但是,IE8之前的版本沒有優(yōu)化,因此數(shù)組方法依然有效。這并不意味著字符串相連時我們要進行瀏覽器檢測。在決定如何連接時要考慮的是字符串的大小和數(shù)量。
當字符串相對較?。ㄐ∮?0字符)且連接數(shù)量也較小時(小于1000個),所有的瀏覽器使用加法運算符都能在不到1毫秒內(nèi)輕松完成連接。增加字符串數(shù)量或大小時,IE7中性能會明顯下降。字符串大小增加時,F(xiàn)irefox中加法運算符和數(shù)組成技巧性能差異會變小。字符串數(shù)量增加時,Safari中加法運算符和數(shù)組成技巧性能差異會變小。改變字符串數(shù)量或大小時,Chrome和Opera中加法運算符一直保持領(lǐng)先優(yōu)勢。
所以,由于在各瀏覽器下性能不一致,選用技術(shù)取決于實際情況和面對的瀏覽器。
大多數(shù)情況下,加法運算符是首選;如果用戶主要使用IE6或7,并且字符串大小較大或數(shù)量較多時,那么數(shù)組技術(shù)就很值得。
一般情況下,如果是語義性的字符串,不應(yīng)該使用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');
有關(guān)js字符串數(shù)組連接的性能比較,就介紹到這里了,希望對大家有所幫助。
相關(guān)文章
JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
Javascript實現(xiàn)獲取及設(shè)置光標位置的方法
這篇文章主要介紹了Javascript實現(xiàn)獲取及設(shè)置光標位置的方法,涉及javascript針對頁面光標位置的相關(guān)操作技巧,具有良好的兼容性,非常簡單實用,需要的朋友可以參考下2015-07-07
Bootstrap基本插件學習筆記之Tooltip提示工具(18)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之oltip提示工具的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端)
這篇文章主要介紹了JavaScript 實現(xiàn)拖拽效果組件功能(兼容移動端),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11

