JS字符串连接性能问题

先上结论：1 要看运算的规模，2 要看浏览器

本文系转载，要注明！！！

例：

    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("");

    }

这段代码首先要注意的是strings属性，本意是私有属性，它只有两个方法，即append()和toString()方法。append()方法有一 个参数，它把该参数附加到字符串数组中，toString()方法调用数组的join()方法，返回真正连接成的字符串，要用StringBuffer对 象连接一组字符串，可以用下面的代码：

    var buffer = new StringBuffer();

    buffer.append("Hello ");

    buffer.append("World");

    var result = buffer.toString();

    console.log(reutls);//Hello World

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

    var d1 = new Date();

    var str = "";

    for(var i = 0; i < 100000; i++){

        str += "text ";

    }

    var d2 = new Date();

    document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds");

 

    var oBuffer = new StringBuffer();

    d3 = new Date();

    for(var i = 0; i < 100000; i++){

        oBuffer.append("text ");

    }

    var sResult = oBuffer.toString();

    d4 = new Date();

    document.write("
Concatenation with plus: " + (d4.getTime() - d3.getTime()) + " milliseconds");

这段代码对字符串连接进行两个测试，第一个使用加号，第二个使用StringBuffer类。每个操作都连接100000个字符串，日期值 d1,d2,d3和d4用于判断完成操作需要的时间。创建新Date对象时，如果没有参数，赋予对象的是当前的日期与时间。要计算连接操作经历多少时间， 把日期的毫秒表示（getTime()方法的返回值）想减即可。这是衡量javascript性能的常用方法。该测试结果应该说明使用 StringBuffer类比使用加号节省了50%-60%的时间。

 

 

注：如今浏览器对字符串的优化已经改变了字符串相连的局面。 

Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更好的性能。但是，IE8之前的版本没有优化，因此数组方法依然有效。 

这并不意味着字符串相连时我们要进行浏览器检测。在决定如何连接时要考虑的是字符串的大小和数量。 

1）当字符串相对较小（<20字符）且连接数量也较小时(<1000个），所有的浏览器使用加法运算符都能在不到1豪秒内轻松完成连接。 

2）增加字符串数量或大小时，IE7中性能会明显下降。 

3）字符串大小增加时，Firefox中加法运算符和数组成技巧性能差异会变小。 

4）字符串数量增加时，Safari中加法运算符和数组成技巧性能差异会变小。 

5）改变字符串数量或大小时，Chrome和Opera中加法运算符一直保持领先优势。 

所以，由于在各浏览器下性能不一致，选用技术取决于实际情况和面对的浏览器。 

大多数情况下，加法运算符是首选；如果用户主要使用IE6或7，并且字符串大小较大或数量较多时，那么数组技术就很值得。