1 如何进行字符串连接?
首先让我们来回顾一下字符串连接的两种常用方法:
1.1 使用字符串连接运算符
常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:
var str = "";
str = str + "a";
1.2 使用数组 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。
var str = [];
for (var i = 0; i str[i] = "12345";
}
str = str.join("");
2 测试
下面通过复制字符串的过程来测试两种方法的性能:
2.1 通过字符串连接运算符进行复制:
function copyByOperator(str, times) {
var newStr = "";
for (var i = 0; i newStr += str;
}
return newStr;
}
2.2 通过数组进行复制:
function copyByArray(str, times) {
var newStr = [];
for (var i = 0; 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对字符串连接运算进行了优化,效率已经高于数组复制法。
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下也出现了字符串连接运算比数组复制法高效的情况。
3 总结
浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn