快乐心情

在很多时候，我们在web前端技术中用到JavaScript中的字符串连接操作，一般都会用“+”运算符，如：

var stra="abc";
stra+="def";

上面的代码执行的步骤如下：
(1) 创建存储”abc”的字符串。
(2) 创建存储”def”的字符串。
(3) 创建存储连接结果的字符串。
(4) 把str的当前内容复制到结果中。
(5) 把”def”复制到结果中。
(6) 更新stra，使它指向结果。
每次完成字符串连接都会执行步骤2到6，使得这种操作非常消耗资源。如果重复这一过程几百次，甚至几千次，就会造成性能问题。
能不能就像java里面，字符串通连接常都不用“+”运算符，而用StringBuffer类中的append方法来达到性能上的优化，事实也证明在java里面，后者要比前者在性能方面得到很大的提高。于是利用JavaScript仿造java中的StringBuffer类，用Array对象存储字符串，然后用join()方法（参数是空字符串）创建最后的字符串。想像用下面的代码代替前面的代码：

var arr = new Array();
arr.push("abc");
arr.push("def");
var str = arr.join("");

这样，无论在数组中引入多少字符串都不成问题，因为只在调用join()方法时才会发生连接操作。此时，执行的步骤如下：
(1) 创建存储结果的字符串。
(2) 把每个字符串复制到结果中的合适位置。

总结: 如何程序中需要多次进行字符串连接,最好使用Array的join方法.
下面我把这个功能封成一个类:

function StringBuffer(){
　　　　this._strings=new Array;
}
StringBuffer.prototype.append=function(str){
　　　　this._strings.push(str);
}
StringBuffer.prototype.toString=function(){
　　　　returnthis._strings.join("");
}

这是在《javascript高级程序设计》一书中作者所提倡的，并且用如下代码来测试这个类与“+”运算来进行字符串连接的性能： 

//使用 "+=" 拼接字符串
var d=new Date();
var str="";
for(var i=0;i<10000;i++){
　　str+="test";
}
var d2=new Date();
document.writeln(d2.getTime()-d.getTime());

//使用 StringBuffer
var sd = new Date();
var str2 = new StringBuffer();
for(var i=0;i<10000;i++){
　　str2.append("test");
}
var res = str2.toString();
var ed = new Date();
document.writeln(ed.getTime()-sd.getTime());

(进行了小部分修改)
在作者当时的情况下作者得出的多次测试结果看来：
使用StringBuffer可以节省50%以上的时间。 

我在网上也查了n多关于javascript字符串的连接优化的网文，即使到现在还有很多网友像追风一样，对作者这个结果深信无疑，但我今天亲自测试了一下，结果让我大吃一惊：
当然IE6及IE7上作者的结果是正确的，性能方面StringBuffer可以节省50%以上的时间。
当在火狐FF3.5上,Opera浏览器上，chrome浏览器上结果却刚好相反，“+”运算明显要高于我们写的StringBuffer方法，而且也是50%的差距，这里左下修改，发布这篇文章后有人提醒，我这里只循环10000次，如果把循环次数加到一百万(1000000)次，结果就不会令我吃惊了，确实当循环次数达到一百万的时候，测试出来的结果如作者说的一样，StringBuffer运算要快，但与”+=”运算的时间相差不大，当我用Google测试的时候，发现问题不对，结果相反，用”+=”比用StringBuffer运算要快得多。再用一千万(10000000)测试，google浏览器还是”+=”运算比用StringBuffer运算要快得多，从10000次开始，我比较下了火狐和google浏览器的连接字符串的运算速度，明显的火狐运算速度比google浏览器要快很多，随着循环的次数加大，很明显这样的运算速度火狐要比google快n倍。
最后我感觉，当我们处理javascript字符串的连接优化的时候，是不是要考虑到浏览器的问题。特别是字符串链接很多的时候。出现这种情况，可能是随着浏览器版本的提高，JavaScript的版本更新，对“+”运算进行了很多的优化而导致“+”运算明显要高于我们前面说写的StringBuffer方法。

声明：转载原创文章时请注明：
    文章转载自:快乐心情, 原文地址:javascript字符串的连接优化