欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2011年03月05日 23:33:43   作者：  
這是個(gè)老話題了，之所以再拿出來說，是因?yàn)闉g覽器一直在進(jìn)步，以前最好的方法現(xiàn)在不一定是最好的。

1 如何進(jìn)行字符串連接？

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

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

復(fù)制代碼 代碼如下:

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

1.2 使用數(shù)組

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

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

2 測(cè)試

下面通過復(fù)制字符串的過程來測(cè)試兩種方法的性能：
2.1 通過字符串連接運(yùn)算符進(jìn)行復(fù)制：
復(fù)制代碼 代碼如下:

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

2.2 通過數(shù)組進(jìn)行復(fù)制：
復(fù)制代碼 代碼如下:

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

str采用一段固定的HTML字符串，長(zhǎng)度是61。
2.3 IE下的測(cè)試

考慮到IE的性能比較差，先用小的times值（6000）在IE 6、IE 7和IE 8下面測(cè)試。運(yùn)行10次后取平均值，結(jié)果如下：
IE瀏覽器下的測(cè)試結(jié)果
瀏覽器 copyByOperator copyByArray
IE 6 1780.4ms 9.5ms
IE 7 1754.6ms 7.7ms
IE 8 1.6ms 9.4ms

IE6、7與IE8的測(cè)試結(jié)果相距甚遠(yuǎn)，很明顯地，IE 8對(duì)字符串連接運(yùn)算進(jìn)行了優(yōu)化，效率已經(jīng)高于數(shù)組復(fù)制法。

2.4 各種瀏覽器下的測(cè)試

下面再用比較大的times值（50000）對(duì)最新版本的各種瀏覽器進(jìn)行測(cè)試。

各種瀏覽器的測(cè)試結(jié)果
瀏覽器 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

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

3 總結(jié)

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

相關(guān)文章

最新評(píng)論