JavaScript组合拼接字符串的效率对比测试
在脚本开发过程中，经常会按照某个规则，组合拼接出一个大字符串进行输出。比如写脚本控件时控制整个控件的外观的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[i] = str;
result = a.join(""); a = null;
大家可以测试测试，组合出一个相同大小的字符串所消耗的时间，我这里测试出来的结果是：<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"> </div>
<div id="method2"> </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以上的字符串组合，那就是数组的效率高了。
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法优于传统字符串拼接。
相关推荐
-
浅谈jquery拼接字符串效率比较高的方法
实例如下: var roleidArray = new Array(""); for(i = 0; i < rightRows.length; i++) { roleidArray.push(rightRows[i].id); } roleidArray = roleidArray.join(",").substring(1); 代码很简单,我就不做注释了 以上这篇浅谈jquery拼接字符串效率比较高的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
-
javascript字符串拼接的效率问题
复制代码 代码如下: function xntest(){ var d1=new Date(); var str=""; for(var i=0;i<10000;i++){ str+="stext"; } var d2=new Date(); document.write(" 字符串拼接方式耗时:"+(d2.getTime()- d1.getTime())+"毫秒:"); d1=new Date(); var sb=ne
-
javascript中字符串拼接详解
最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script"; 实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符串
-
JavaScript组合拼接字符串的效率对比测试
在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值后动态分析创建HTML标签时,不过这里我就不讨论拼接字符串的具体应用了,我只是想在这里讨论一下拼接的效率. 字符串的拼接在我们写代码的时候都是用"+="这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如: 复
-
JavaScript 利用StringBuffer类提升+=拼接字符串效率
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
javascript数组组合成字符串的脚本
在某些程序中,你可能需要将数组组合成字符串,比如将var aArray = ["a","b","c"];处理成字符串的形式.这里有两种方法,当然如果你有更好的办法,别忘记留言给我. 第一种: aArray.toString() 第二种: aArray + "" 演示: js数组组合成字符串 var aArray = ["a","b","c"]; document.wr
-
Python 合并拼接字符串的方法
问题 你想将几个小的字符串合并为一个大的字符串 解决方案 如果你想要合并的字符串是在一个序列或者 iterable 中,那么最快的方式就是使用 join() 方法.比如: >>> parts = ['Is', 'Chicago', 'Not', 'Chicago?'] >>> ' '.join(parts) 'Is Chicago Not Chicago?' >>> ','.join(parts) 'Is,Chicago,Not,Chicago?' &
-
javascript正则表达式和字符串RegExp and String（二）
在上篇文章给大家介绍了javascript正则表达式和字符串RegExp and String(一),本文给大家继续分享相关内容. 前言 我认为,在学习一门编程语言的过程中,字符串.数组.容器是非常重要的部分,为了提高编程效率,我通常会对字符串.数组以及容器作深入的学习,详细了解相关特点及对应的API.这篇文章是针对javascript字符串学习写下的笔记,在此与需要的朋友分享. 思维导图 字符串的创建方式 字符串是javascript中的基本类型之一,它对应的类型是String,可以通过两种方
-
js两种拼接字符串的简单方法(必看)
如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var
-
python3 拼接字符串的7种方法
Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下兼容. 1.直接通过(+)操作符拼接 >>> 'Hello' + ' ' + 'World' + '!' 'Hello World!' 使用这种方式进行字符串连接的操作效率低下,因为python中使用 + 拼接两个字符串时会生成一个新的字符串,生成新的字符串就需要重新申请内存,当拼接字符串较多时自然会
-
JS简单生成由字母数字组合随机字符串示例
本文实例讲述了JS简单生成由字母数字组合随机字符串.分享给大家供大家参考,具体如下: 前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法 Math.random().toString(36).substr(2); 输出结果 解释 很有意思,研究了一下,基本上toString后的参数规定可以是2-36之间的任意整数,不写的话默认是10(也就是十进制),此时返回的值就是那个随机数. 若是偶数,返回的数值字符串都是短的,若是奇数,
-
JavaScript组合设计模式--改进引入案例分析
本文实例讲述了JavaScript组合设计模式--改进引入案例.分享给大家供大家参考,具体如下: 对于组合设计模式: (1)组合模式中把对象分为两种(组合对象,和叶子对象) (2)组合对象和叶子对象实现:同一批操作 (3)对组合对象执行的操作可以向下传递到叶子节点进行操作 (4)这样就会弱化类与类之间的耦合 (5)他常用的手法是把对象组合成属性结构的对象 根据组合模式的这些特性我们改写代码如下: 由于用到了接口检验所以我们先引入接口文件代码 //定义一个静态方法来实现接口与实现类的直接检