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