利用JS提高组合拼接字符串效率的方法

啊秀 · 发表于 2009-1-26 06:10:54

希望跟各位高手交流，搞过web开发的朋友都知道，在脚本开发过程中，经常会按照某个规则，组合拼接出一个大字符串进行输出。比如写脚本控件时控制整个控件的外观的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("") 得到结果字符串，代码示例：
复制内容到剪贴板
代码:

var str = "01234567891123456789212345678931234567894123456789";
      str+= "51234567896123456789712345678981234567899123456789\n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a = str;
result = a.join(""); a = null;
大家可以测试测试，组合出一个相同大小的字符串所消耗的时间，我这里测试出来的结果是：<15毫秒，请注意，它的单位是毫秒，也就是说组合出这么一个200K的字符串，两种模式的时间消耗是差不多两个数量级。这意味着什么？意味着后者已经工作结束吃完中饭回来，前者还在做着苦力。我写一个测试页面，大家可以把下面这些代码拷贝下来另存为一个HTML文件在网页里打开自己来测试一下两者之间的效率差，反正我测试的是前者要半分钟才能完成的事，后者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"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">

最后我再说几句，是不是以后字符串拼接就一律使用数组join呢？这个要看你的实际需
求了，就普通的几个或者K级的字节的组合就没有必要使用数组法了，因为开数组变量也是有
消耗的。若有几K以上的字符串组合，那就是数组的效率高了。

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里可以大大提高效率，而在Firefox Mozilla
Opera 里两种方法耗时基本相近，这些数据足可以判定数组join法优于传统字符串拼接。

无心之得 · 发表于 2009-1-26 07:36:55

不错呀，谢谢

hxjimwd · 发表于 2009-1-26 06:56:51

不错，不过不是所有浏览器有效，学习笔记：http://www.StudyNote.cn

狂野飞车 · 发表于 2009-1-26 07:38:34

很好，学习了

啊秀 · 发表于 2009-1-26 07:56:27

代码：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="js/StringBuffer.js"></script>
<script type="text/javascript">
var d1 = new Date();
var str = "";
for (var i=0; i < 30000; i++) {
      str += "text";
}
var d2 = new Date();
document.write("第一次时间:" + (d2.getTime() - d1.getTime()));

var oBuffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 30000; i++) {
      oBuffer.append("text");
}

var sResult = oBuffer.toString();
d2 = new Date();
document.write("<br />第二次时间:" + (d2.getTime() -d1.getTime()) );

d1 = new Date();
var oArray=new Array();
for (var i=0; i < 30000; i++) {
      oArray.push("text");
}
var str=oArray.join("");
d2 = new Date();
document.write("<br />第三次时间:" + (d2.getTime() -d1.getTime()) );
</script>

结果（我的电脑，ie6.0）
第一次：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
第一次时间:2234
第二次时间:282
第三次时间:484

第二次（停10秒后点击刷新）：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
第一次时间:2078
第二次时间:297
第三次时间:484

第三次（停10秒后点击刷新）：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
第一次时间:1531
第二次时间:297

大头佬 · 发表于 2009-1-26 06:54:55

很好，学习学习，谢谢楼主咯

		自动登录	找回密码
密码			注册

利用JS提高组合拼接字符串效率的方法

相关帖子