JavaScript中数组join与字符串拼接的性能对比测试

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function winProps(){
var message = [];
var str;
var data = new Date();
var mils1 = data.getTime();
//array数组
for(var i = 0; i<500000;i++)
message.push("This window is ");
message.join(" ");
data = new Date();
var mils2 = data.getTime();
arrayMils = mils2 - mils1;
//字符串直接连接
for(var i = 0; i<500000;i++)
str+="This window is ";
data = new Date();
var mils3 = data.getTime();
stringMils=mils3-mils2;
//显示内容，不重要
var mes = [];
mes.push("时间1:");
mes.push(mils1);
mes.push("\n时间2");
mes.push(mils2);
mes.push("\n时间3");
mes.push(mils3);
mes.push("\narray所用时间");
mes.push(arrayMils>=0?arrayMils:arrayMils+1000);
mes.push("\nstr连接所用时间");
mes.push(stringMils>=0?stringMils:stringMils+1000);
alert(mes.join(" "));
} 
</script>
</head>
<body>
<input type="button" value="点我" onclick="winProps();"/>
</body>

多浏览器性能测试结果分析

测试结果表明，与常规观点认为使用数组拼接更快的说法不同，在IE9、IE8以及Firefox、Google Chrome、搜狗等基于IE内核的浏览器中进行验证，当数据量级超过100000时，采用数组拼接方法的性能反而低于使用加号（+）字符串拼接方法。

1000000次的结果

ie第一次（大概，ie复制不了，图就不截了）

 
array所用时间 890
str连接所用时间 450

在IE浏览器中，由于内存可能未及时回收，第二次点击按钮时会弹出警告框，且耗时增加至1400和1200毫秒。多次点击后，“+=”字符串连接的耗时回落至400毫秒左右。这是否意味着array对象未被回收？打开任务管理器并刷新IE浏览器后，内存占用降低了100多MB，这表明需要进一步研究IE的JavaScript内存回收机制。

ff

 
时间1: 1312102053720
时间2 1312102053842
时间3 1312102053882
array所用时间 122
str连接所用时间 40

google（也复制不了数据）

array所用时间 200

str连接所用时间 100

opera

时间1: 1312102258270

时间2 1312102258460

时间3 1312102258592

array所用时间 190

str连接所用时间 132

顺便提一下，当数据量达到5000000时，Firefox抛出了一个异常，推测是内存溢出。（注：对此理解不深）

错误： uncaught exception: 8.375396749959738e-274

在IE下测试时果断弹出警告，随后出现out of memory（内存溢出）错误。

当然，如此庞大的数据连接在现代网页开发中几乎不会出现，数据处理通常在后台完成。由于老师的主机不敢安装这么多浏览器进行测试，结果仅供参考。

去除join后的性能对比与结论

实际上，array的join操作消耗了大量时间。如果去掉这一句，Opera和Google Chrome便显示出数组join的优势：

opera结果：

 
时间1: 1312101715553
时间2 1312101715622
时间3 1312101715749
array所用时间 69
str连接所用时间 127
[code]
ie结果
array所用时间700
str连接所用时间500
ff
[code]
时间1: 1312101925895
时间2 1312101925945
时间3 1312101925979
array所用时间 50
str连接所用时间 34

google

array所用时间17

str连接所用时间100

需要查阅join的底层机制后再做进一步分析。

ps：浏览器版本

google12.0.742.122

ff5.0.1

opera11.50

ie8.0.6001.18702

pss：ie处理速度不给力