再論Javascript下字符串連接的性能

更新時間：2011年03月05日 23:33:43 作者：

這是個老話題了，之所以再拿出來說，是因為瀏覽器一直在進步，以前最好的方法現(xiàn)在不一定是最好的。

1 如何進行字符串連接？

首先讓我們來回顧一下字符串連接的兩種常用方法：
1.1 使用字符串連接運算符

常用的語言（如Java、C#、PHP等）都有字符串連接運算符，Javascript也不例外，代碼示例：

 
var str = ""; 
str = str + "a"; 

1.2 使用數組

在常用的語言中，字符串連接運算的性能普遍不高，為此在C#中就專門提供了StringBuilder（Java中提供了StringBuffer）用于連接字符串。而在Javascript中就出現(xiàn)了通過Array模擬StringBuilder的方案。

復制代碼代碼如下:

 
var str = []; 
for (var i = 0; i < 100; i++) { 
　　str[i] = "12345"; 
} 
str = str.join(""); 

2 測試

下面通過復制字符串的過程來測試兩種方法的性能：
2.1 通過字符串連接運算符進行復制：

復制代碼代碼如下:

 
function copyByOperator(str, times) { 
　　var newStr = ""; 
　　for (var i = 0; i < times; i++) { 
　　　　newStr += str; 
　　} 
　　return newStr; 
} 

2.2 通過數組進行復制：

復制代碼代碼如下:

 
function copyByArray(str, times) { 
　　var newStr = []; 
　　for (var i = 0; i < times; i++) { 
　　　　newStr[i] = str; 
　　} 
　　return newStr.join(""); 
} 

str采用一段固定的HTML字符串，長度是61。
2.3 IE下的測試

考慮到IE的性能比較差，先用小的times值（6000）在IE 6、IE 7和IE 8下面測試。運行10次后取平均值，結果如下：

IE瀏覽器下的測試結果
瀏覽器	copyByOperator	copyByArray
IE 6	1780.4ms	9.5ms
IE 7	1754.6ms	7.7ms
IE 8	1.6ms	9.4ms

IE6、7與IE8的測試結果相距甚遠，很明顯地，IE 8對字符串連接運算進行了優(yōu)化，效率已經高于數組復制法。

2.4 各種瀏覽器下的測試

下面再用比較大的times值（50000）對最新版本的各種瀏覽器進行測試。

各種瀏覽器的測試結果
瀏覽器	copyByOperator	copyByArray
IE 8	21.8ms	54.7ms
Firefox 3.6	40.9ms	27.9ms
Chrome 4	4.4ms	10.9ms
Safari 4.0.5	41.6ms	34.6ms
Opera 10.50	33.1ms	23ms

這個結果真是出人意料。IE 8下的字符串連接運算竟然把Chrome以外的瀏覽器都打敗了，那些老說IE性能低下的可要注意點了。而在Chrome下也出現(xiàn)了字符串連接運算比數組復制法高效的情況。

3 總結

瀏覽器的性能在不斷地提高，作為前端工程師，也要適時調整Javascript程序的優(yōu)化策略，以獲得最佳的性能。

您可能感興趣的文章:

字符串連接

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

再論Javascript下字符串連接的性能

2.4 各種瀏覽器下的測試

3 總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具