<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JS中“+=”与array.join的性能测试</title>
<style>
#div1,#div2{width: 500px;height: 200px;margin-bottom: 30px;background:#999;overflow: auto;word-break:break-all;}
#div2{background: #0f0;}
#tArea1{position: absolute;right: 100px;top: 50px;width: 600px;height: 430px;font-size: 20px;resize: none;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var oDate1=new Date();
var tmpStr="";
for(var i=0;i<100000;i++){
tmpStr+="'"+i+"'";
}
oDiv1.innerHTML=tmpStr;
var oDate2=new Date();
var oDate3=new Date();
var tmpArray=new Array();
for(var j=0;j<100000;j++){
tmpArray[j]=j;
}
var tmpArrayStr=tmpArray.join();
oDiv2.innerHTML=tmpArrayStr;
var oDate4=new Date();
alert((oDate2-oDate1)+"||"+(oDate4-oDate3));
/*var tmpStr="";
console.time("计时器一");
for(var i=0;i<100000;i++){
tmpStr+=i+"'";
}
document.body.innerHTML=tmpStr;
console.timeEnd("计时器一");*/
/*var tmpArray=new Array();
console.time("计时器二");
for(var j=0;j<100000;j++){
tmpArray[j]=j;
}
var tmpArrayStr=tmpArray.join();
document.body.innerHTML=tmpArrayStr;
console.timeEnd("计时器二");*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<textarea id="tArea1" name="" id="" cols="30" rows="10">
1.通过多次刷新，不管在chrome、firefox还是IE6，测试的结果都是 "array.join" 的性能比 "+=" 要好。特别是在IE6下面，要强几十倍。
2.测试的结果和鸟哥的测试结果有出入，在IE下的测试结果是一样的，但是在chrome和firefox下面，和鸟哥的测试结果刚好相反。个人猜测的原因可能是，firefox和chrome的内存
处理及GC回收机制已经改进很多，毕意鸟哥那篇是08年左右写的。。。
3.测试结论：在小数据量的字符串接连操作时，"+="和"array.join"的性能相差无几（chrome或firefox），可以随意使用哪一种方式，但是在操作大数据量的字符串连接时（>=
10000），使用"array.join"的性能优势遍体现出来了。 特别说明，在IE下面，最好使用 "array.join"的方式来拼接字符串。。
</textarea>
</body>
</html>