再论Javascript下字符串连接的性能
时间：2020-11-25 11:59:22|栏目：JavaScript代码|点击： 次
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 < 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次后取平均值，结果如下：
| 浏览器 | 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程序的优化策略，以获得最佳的性能。
