JavaScript 字符串拼接性能分析小记

JavaScript 中,我们经常会因为各种各样的原因去拼接字符串，可能是为了Html的呈现，可能是为了属性的设置，也可能仅仅是为了输出调试日志。

　　每次拼接字符串的时候，我们很自然地去考虑它的性能，是不是str=str+a是不是和str+=a性能一样，使用数组Join是不是会更快一些，哪一种才是最好的实现。

的确，我们有诸多方式去拼接字符串，下面本文将会将主流字符串拼接方逐一进行性能评测。

公平起见，我们的测试都是跑在各浏览器的最后一个正式发布版本上，即IE9 ，Chrome19，FF13 及Opera12。

为了测试，我们先构造一个 data,它有个成员，是个100大小的数组。

var length = 100;
var data = { list: [] };
for (var i = 0; i < length; i ++) {
    data.list.push({
        str1: 'chsword, 邹健, Zou Jian ',
        str2: 'http://chsword.cnblogs.com',
        str3: 'http://www.chsword.net',
        str4: '"http://weibo.com/chsword","http://t.qq.com/chsword"',
        str5: 'test'
    });
};

准备好了，那么我们来进行测试，我选定了8种字符串拼接的方法，然后每一种运行1W次的字符串拼接，每一次拼接将元素的五个子元素拼接在一起：

1.str+=str+a;
2.str=str.concat(a);
3.arr.push(a); and arr.join(“”);
4.str=str.concat(a,b,c,d,e);
5.str=str+a;
6.str=String.prototype.concat(str,a,b,c,d,e);
7.str=String.prototype.concat.apply(s, [a,b,c,d,e]);
8.str=String.prototype.concat(str,a);
9.arr[arr.length]=a

我将以上测试运行在这些浏览器上: IE 9, Chrome 19, Firefox 13, Opera 12.

结果为:

注：图表中单位为MS，标记为2000的都是运行了1分钟以上还未停止的。

通过图表，我们可以看到+=的性能在主流浏览器中平均最高，不过，要说明一点，+=操作在IE早期版本中，性能较差。

Array.Join 来拼接字符串，在FF和Chrome中都比+=方法慢上数倍。

另外，还有像String.prototype.concat(str,a,b,c,d,e)这样的操作，如果在Chrome及Opera中大量执行的话，会直接令页面挂掉，所以这些都是不推荐使用的

总结一下，总体看来+=的性能最高，早先的浏览器中，使用Array.Join性能会较高

测试代码 :

1.使用 += 

var str="";
for (var i = 0; i < number; i ++) {
    for(var j=0;j<length;j++){
        str+=data.list[j].str1;
        str+=data.list[j].str2;
        str+=data.list[j].str3;
        str+=data.list[j].str4;
        str+=data.list[j].str5;
    }
    str+="\n";
}

2.str.concat

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str=str.concat(data.list[j].str1);
        str=str.concat(data.list[j].str2);
        str=str.concat(data.list[j].str3);
        str=str.concat(data.list[j].str4);
        str=str.concat(data.list[j].str5);
    }
    str=str.concat( "\n");
}

3.Use Array Join  

var arr=[];
for (var i = 0; i < number; i ++) {
    for(var j=0;j<length;j++){
        arr.push(data.list[j].str1);
        arr.push(data.list[j].str2);
        arr.push(data.list[j].str3);
        arr.push(data.list[j].str4);
        arr.push(data.list[j].str5);
    }
    arr.push("\n");
}
arr.join("");

4.str=str.concat(a,b,c,d,e);  

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str = str.concat(data.list[j].str1
        ,data.list[j].str2
        ,data.list[j].str3
        ,data.list[j].str4
        ,data.list[j].str5);
    }
    str = str.concat("\n");
}

5.str=str+a

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str = str + data.list[j].str1;
        str = str + data.list[j].str2;
        str = str + data.list[j].str3;
        str = str + data.list[j].str4;
        str = str + data.list[j].str5;
    }
    str = str + "\n";
}

6.str=String.prototype.concat(str,a,b,c,d,e)

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str = String.prototype.concat(str,data.list[j].str1,
        data.list[j].str2,
        data.list[j].str3,
        data.list[j].str4,
        data.list[j].str5);
    }
    str = String.prototype.concat(str,"\n");
}

7.str=String.prototype.concat.apply(s, [a,b,c,d,e])

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str = String.prototype.concat.apply(str, [data.list[j].str1,
        data.list[j].str2,
        data.list[j].str3,
        data.list[j].str4,
        data.list[j].str5]);
    }
    str =String.prototype.concat.apply(str,["\n"]);
}

8.str=String.prototype.concat(str,a)

var str = "";
for (var i = 0; i < number; i++) {
    for (var j = 0; j < length; j++) {
        str = String.prototype.concat.call(str,data.list[j].str1);
        str = String.prototype.concat.call(str,data.list[j].str2);
        str = String.prototype.concat.call(str,data.list[j].str3);
        str = String.prototype.concat.call(str, data.list[j].str4);
        str = String.prototype.concat.call(str,data.list[j].str5);
    }
    str = String.prototype.concat(str, "\n");
}

9.arr[arr.length]

var arr=[];
            for (var i = 0; i < number; i ++) {            
                for(var j=0;j<length;j++){
                    arr[arr.length]=data.list[j].str1;
                    arr[arr.length]=data.list[j].str2;
                    arr[arr.length]=data.list[j].str3;
                    arr[arr.length]=data.list[j].str4;
                    arr[arr.length]=data.list[j].str5;
                }
                arr[arr.length]="\n";
            }
            arr.join("");