JavaScript大字符串拼接性能：传统+=与数组join法对比

JavaScript大字符串拼接性能：传统+=与数组join法对比

在脚本开发过程中，经常需要按照特定规则组合并拼接出一个大字符串进行输出。例如，在编写脚本控件时，可能需要生成控制整个控件外观的HTML标签；或者在AJAX请求获取服务器端回传值后，动态解析并创建HTML标签。本文暂不探讨拼接字符串的具体应用场景，而是聚焦于不同拼接方式的执行效率对比。

传统+=运算符的性能瓶颈

在编写代码时，字符串拼接通常使用“+=”运算符，即 s += String; 这是最广为人知的写法。然而，当拼接后的字符串容量达到几十K甚至几百K时，脚本执行速度会显著变慢，CPU使用率也会急剧升高。例如：

var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "";
for(var i=0; i<2000; i++) result += str;

仅执行上述一步操作，生成的结果字符串长度约为200K，耗时约1.1秒（具体耗时与电脑配置相关），CPU峰值占用率达到100%。为了更直观地展示效果，此处增加了循环次数。由此可见，单步操作便消耗了超过一秒的时间，若叠加其他代码的执行时间，整个脚本块的执行耗时将变得难以接受。那么，是否存在优化的解决方案？是否还有其他拼接方法？答案显然是肯定的，否则本文便失去了意义。

数组join法的高效实现

一种更高效的拼接方式是使用数组。在循环拼接时，不直接将字符串追加到目标字符串中，而是将字符串依次存入数组，最后通过数组的join("")方法生成结果字符串。代码示例如下：

var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;

跨浏览器性能实测与结论

读者可自行测试生成相同大小字符串所消耗的时间。经测试，数组join法耗时小于15毫秒，请注意单位是毫秒。这意味着生成一个200K的字符串，两种模式的时间消耗相差近两个数量级。这代表什么？意味着当数组法已执行完毕时，传统拼接法仍在运行。为此，我编写了一个测试页面，读者可将下方代码保存为HTM文件并在浏览器中打开，自行验证两者的效率差异。据我测试，传统方法需耗时约半分钟，而数组法仅需0.07秒即可完成（循环10000次）。

<body>
字符串拼接次数<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()"><br>
<div id="method1">&nbsp;</div>
<div id="method2">&nbsp;</div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//这个被拼接的字符串长是100字节 author: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
//方法一
function method1()
{
 var result = "";
 var totle = parseInt(document.getElementById("totle").value);
 var n = new Date().getTime();
for(var i=0; i<totle; i++)
 {
 result += str;
 }
document.getElementById("show").value = result;
 var s = "字符串拼接法：拼接后的大字符串长 "+ result.length +"字节，"+
 "拼接耗时 "+ (new Date().getTime()-n) +"毫秒！";
 document.getElementById("method1").innerHTML = s;
}
//方法二
function method2()
{
 var result = "";
 var totle = parseInt(document.getElementById("totle").value);
 var n = new Date().getTime();
var a = new Array();
 for(var i=0; i<totle; i++)
 {
 a[i] = str;
 }
 result = a.join(""); a=null;
document.getElementById("show").value = result;
 var s = "数组赋值join法：拼接后的大字符串长 "+ result.length +"字节，"+
 "拼接耗时 "+ (new Date().getTime()-n) +"毫秒！";
 document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>

最后补充几点：是否在所有情况下都应使用数组join法进行字符串拼接？这取决于实际需求。对于仅包含几个字符或K级字节的小规模组合，使用数组法并无必要，因为创建数组变量本身也有开销。然而，若涉及几K以上的字符串组合，数组join法的效率优势则更为明显。

IE 6.0:

字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 22089毫秒！ 数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 218毫秒！

Firefox 1.0:

字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！ 数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！

Mozilla 1.7:

字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 1045毫秒！ 数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！

Netscape 7.0:

字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 10273毫秒！ 数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1138毫秒！

Opera 7.54:

字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 6968毫秒！ 数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 6922毫秒！

循环10000次的测试结果表明，在IE和Netscape浏览器中，数组join法能显著提高拼接效率；而在Firefox、Mozilla及Opera浏览器中，两种方法的耗时基本相当。综合这些数据，可以判定数组join法在多数场景下优于传统的字符串拼接方式。