最近在看《高性能网站建设进阶指南》,第七章为《编写高效的javascript》,作者为Nicholas C. Zakas(同时也是《javascript高级程序设计》的作者),里面讲到字符串连接的优化问题。
字符串连接一直是javascript中性能最低的操作之一,通常情况下,字符串连接是通过使用加法运算符(+)来实现的,比方说
1 var text="hello";
2 text+=" ";
3 text+="world!";
早期浏览器没有对这种运算进行优化。由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。参照《javascript高级程序设计》,大致要经过以下几个步骤:
- 创建存储"hello"的字符串。
- 创建存储"world"的字符串。
- 创建存储连接结果的字符串。
- 把str的当前内容复制到结果中。
- 把"world "复制到结果中。
- 更新str,使它指向结果。
频繁地在后台创建和销毁字符串会导致字符串连接的性能异常低下。
好在如今大部分浏览器已经对字符串连接进行了优化。第一款进行优化的浏览器是Firefox,从1.0版本开始,在所有情况下使用数组技术实际上都比使用加法运算慢。其他浏览器也优化了字符串连接,Safari、Opera、Chrome和Internet Explorer8也都在使用加法运算符上表现出了更好的性能。(PS:在Ie8之前的版本没有进行优化)
那么,在浏览器还未对字符串连接性能进行优化之前,该怎么改进其性能呢?其中一种普遍使用的方法就是使用Array对象,方法如下:
1 function StringBuffer(){
2 this._strings=new Array();
3 }
4 StringBuffer.prototype.append=function(str){
5 this._strings.push(str)
6 }
7 StringBuffer.prototype.toString=function(){
8 return this._strings.join("");
9 }
这样,无论在数组中引入多少字符串都不成问题,因为只有在调用join()方法时才会发生连接操作,此时步骤如下:
- 创建存储结果的数组
- 把每个字符串复制到结果中的合适位置
- 将数组合并成字符串返回
经过测试,采用上述方法,在Firefox 3.6中以及Ie 8中,性能其实比直接用加法运算符(+)效率要低(上文说过现在大部分主流浏览器都已经经过优化),然而,在IE 8之前版本的IE浏览器中,采用这种方法连接字符串,性能比直接用加法运算符(+)有很大的提高,大概是60%左右(也就是花费的时间为原来的1/3左右),用的是《javascript高级程序设计》里的测试代码:
1 var d1=new Date();
2 var str="";
3 for(var i=0;i<10000;i++){
4 str+="text";
5 }
6 var d2=new Date();
7 var d3=d2.getTime()-d1.getTime();
8 var buffer=new StringBuffer();
9 d1=new Date();
10 for(var j=0;j<10000;j++){
11 buffer.append("text");
12 }
13 var result=buffer.toString();
14 d2=new Date();
15 var d4=d2.getTime()-d1.getTime();
16 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中的性能提升,所以要基于用户的浏览器来权衡用户体验,而不要视图去针对某种具体情况或浏览器版本。不过,在大多数情况下,加法运算符也是首选的。