转载：javascript字符串连接性能的问题

 

转：javascript字符串连接性能的问题

博客分类： 
• Javascript

JavaScriptprototypeIE编程 

    今天看了javascript高级程序设计,其中注意到字符串连接性能问题的谈论.感觉以前自己写的程序只讲简单但是没有注意到性能问题.其中,在javascript中用的最多的字符串连接就有最大的问题.

    例如:
            var str = "hello";

           str += "world";

    大家可能使用最普遍的就是这种了,实际上,这段代码在幕后执行的步骤如下:
     1, 创建存储"hello"的字符串.
     2. 创建存储"world"的字符串.
     3.创建存储连接结果的字符串.
     4. 把str的当前内容复制到结果中.
     5.把"world"复制的结果中.
     6.更新str,使它指向结果.
     大家不难看出:每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重复这一过程几百次,甚至几千次,就会造成性能问题.所以,以后一定要注意,别做毫无意义的消耗...

     既然有问题,那就要解决.解决方法就是用Array对象存储字符串,然后用join()方法(参数是空字符串)创建最后的字符串.

    例如:
            var arr = new Array;
           arr[0] = "hello";
           arr[1] = "world";
           var str = arr.join("");
    这样,无论在数组中引入多少字符串都不成问题,因为只在调用join()方法时才会发生连接操作.执行的步骤:
    1. 创建存储结果的字符串.
    2. 把每个字符串复制到结果中的合适位置.
    当然,我们可以使它更容易理解一些,可以用StringBuffer类打包该功能:

function StringBuffer() {
    this.__strings__ = new Array;
}

StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
}

StringBuffer.prototype.toString = function() {
    return this.__strings__.join("");
}

  上述代码很容易理解,就不用多说,下面着重看一下,两种方法的性能比较.(用事实说话哟)^_^

下面代码测试StringBuffer对象和传统的字符串连接方法的性能比较：

传统方法:

var d1 = new Date();

var str = "";

for (var i=0; i < 10000; i++) {
    str += "text";
}

var d2 = new Date();


StringBuffer对象实现:

var oBuffer = new StringBuffer();

d1 = new Date();

for (var i=0; i < 10000; i++){
    oBuffer.append("text");
}

var sResult = oBuffer.toString();

d2 = new Date();
//输出两者所用的时间差
document.write("<br/>concatenation with StringBuffer:  " +
 (d2.getTime() - d1.getTime()) + " milliseconds" );

　经过上述测试结果应该说明使用StringBuffer类比使用加号可节省50%-66%的时间.(计算程序执行的时间差，

是衡量javascript性能最常用的方法).

　好了，大家可能对字符串连接有一种新的认识，其实，我们也可以看到使用对象编程的一个好处..^_^.

有什么理解有误或写法不准确的地方，希望高手留言或评论指正．

<javascript 高级程序设计=""></javascript>

以上是转载的，但是实际用例测试之后，并不是这样子的。

自己做了三个测试：

function addStr(){

var ts = new Date(); 

var str = ""; 

for(var i=0;i<10000;i++) 

{ 

str += "text" 

} 

var te = new Date();

document.write("原始的方法加号 拼接10000个字符串 花费时间："+(te.getTime()-ts.getTime())+"秒"); 

}

function  stringbufferStr(){

var oSB = new StringBuffer(); 

var sbts = new Date(); 

for(var i=0;i<10000;i++) 

{ 

oSB.append("text"); 

} 

var sRst = oSB.toString(); 

var sbte = new Date(); 

document.write("<br/>StringBuffer 拼接10000个字符串 花费时间："+(sbte.getTime()-sbts.getTime())+"秒"); 

}

function arryAddStr(){

var ayts = new Date(); 

var ayy=[];

var str = ""; 

for(var i=0;i<10000;i++) 

{ 

 ayy.push("text"); 

} 

str = ayy.join(";");

var ayte = new Date();

document.write("<br/>ayy数组 push 拼接10000个字符串 花费时间："+

(ayte.getTime()-ayts.getTime())+"秒"); 

}

addStr();

stringbufferStr();

arryAddStr();

chrome下的结果：

原始的方法加号 拼接10000个字符串 花费时间：1秒

StringBuffer 拼接10000个字符串 花费时间：6秒
ayy数组 push 拼接10000个字符串 花费时间：1秒  
IE8下的结果：不稳定

原始的方法加号 拼接10000个字符串 花费时间：0秒
StringBuffer 拼接10000个字符串 花费时间：16秒
ayy数组 push 拼接10000个字符串 花费时间：0秒

360下的结果：

原始的方法加号 拼接10000个字符串 花费时间：0秒
StringBuffer 拼接10000个字符串 花费时间：16秒
ayy数组 push 拼接10000个字符串 花费时间：15秒

   oP浏览器下的结果：

 

原始的方法加号 拼接10000个字符串 花费时间：1秒

StringBuffer 拼接10000个字符串 花费时间：2秒

ayy数组 push 拼接10000个字符串 花费时间：1秒

FF下的结果：

原始的方法加号 拼接10000个字符串 花费时间：0秒
StringBuffer 拼接10000个字符串 花费时间：1秒
ayy数组 push 拼接10000个字符串 花费时间：1秒 

 

如果把数量增加到十万，还是+最快啊