关于javascript字符串连接性能

最近在看《高性能网站建设进阶指南》，第七章为《编写高效的javascript》，作者为Nicholas C. Zakas（同时也是《javascript高级程序设计》的作者），里面讲到字符串连接的优化问题。

字符串连接一直是javascript中性能最低的操作之一，通常情况下，字符串连接是通过使用加法运算符（+）来实现的，比方说

var text="hello";
text+=" ";
text+="world!";

早期浏览器没有对这种运算进行优化。由于字符串是不可变的，这意味着要创建中间字符串来存储连接的结果。参照《javascript高级程序设计》，大致要经过以下几个步骤：

1. 创建存储"hello"的字符串。
2. 创建存储"world"的字符串。
3. 创建存储连接结果的字符串。
4. 把str的当前内容复制到结果中。
5. 把"world "复制到结果中。
6. 更新str，使它指向结果。

频繁地在后台创建和销毁字符串会导致字符串连接的性能异常低下。

好在如今大部分浏览器已经对字符串连接进行了优化。第一款进行优化的浏览器是Firefox，从1.0版本开始，在所有情况下使用数组技术实际上都比使用加法运算慢。其他浏览器也优化了字符串连接，Safari、Opera、Chrome和Internet Explorer8也都在使用加法运算符上表现出了更好的性能。（PS：在Ie8之前的版本没有进行优化）

那么，在浏览器还未对字符串连接性能进行优化之前，该怎么改进其性能呢？其中一种普遍使用的方法就是使用Array对象，方法如下：

function StringBuffer(){

    this._strings=new Array();

}

StringBuffer.prototype.append=function(str){

    this._strings.push(str)

}

StringBuffer.prototype.toString=function(){

    return this._strings.join("");

}

这样，无论在数组中引入多少字符串都不成问题，因为只有在调用join（）方法时才会发生连接操作，此时步骤如下：

1. 创建存储结果的数组
2. 把每个字符串复制到结果中的合适位置
3. 将数组合并成字符串返回

经过测试，采用上述方法，在Firefox 3.6中以及Ie 8中，性能其实比直接用加法运算符（+）效率要低（上文说过现在大部分主流浏览器都已经经过优化），然而，在IE 8之前版本的IE浏览器中，采用这种方法连接字符串，性能比直接用加法运算符（+）有很大的提高，大概是60%左右（也就是花费的时间为原来的1/3左右），用的是《javascript高级程序设计》里的测试代码：

 var d1=new Date();
 var str="";
 for(var i=0;i<10000;i++){
     str+="text";
 }
 var d2=new Date();
 var d3=d2.getTime()-d1.getTime();

 
 var buffer=new StringBuffer();
 d1=new Date();
 for(var j=0;j<10000;j++){
     buffer.append("text");
 }
 var result=buffer.toString();
 d2=new Date();
 var d4=d2.getTime()-d1.getTime();

 alert("d3:"+d3+" d4:"+d4);

 

以下是Nicholas C. Zakas大牛对决定如何连接字符串的建议，需要考虑两个因素：（1）被连接的字符串大小（2）数量

• 当字符串较小（少于20个字符）且连接的数量也较小时（少于1000个），所有的浏览器中使用的加法运算符都能在不到1毫秒之内轻松完成连接。在这种情况下就没有理由去考虑加法运算符以外的方式了。

 

• 增加连接字符串的数量或大小时，在IE 7中性能会明显下降。当字符串大小增加时，在Firefox中加法运算符和数组技术的性能差异会变小。当字符串连接数量增加时，在Safari中这两种技术的新能差异也同样会变小。只有Chrome和Opera在改变连接字符串的大小和数量时，加法运算符一直保持着显著的性能优势。

 

• 由于在各浏览器下性能不一致，所以选用哪种技术在很大程度上取决与实际情况和面对的浏览器。如果用户主要使用IE 6或7，那么使用数组技术就很值得，因为这会影响大多数人。（备注：目前国内使用IE 6的人不少。。。）通常使用数组技术在其他浏览器中的性能损失要远小于在IE中的性能提升，所以要基于用户的浏览器来权衡用户体验，而不要视图去针对某种具体情况或浏览器版本。不过，在大多数情况下，加法运算符也是首选的。