JavaScript文字列接続の性能問題

2576 ワード

Professional JavaScript for Web Developers(第二版)で文字列操作の例を見ましたが、原文の大意は以下の通りです.

var str = "hello ";
str += "world";
このコードの実行には以下の6ステップがあります.
1.Create a string to store「hello」.
2.Create a string to store「world」.
3.Create a string to store the result of concatension.
4.Copy the current content of str into the reult.
5.Copy the「world」into the relt.
6.Update str to point to the relt.
第2から6ステップは文字列のスペルのたびに発生します.この操作に時間がかかります.この操作を何千何万回も行うと、性能に問題があります.解決策は、Arayを使用してstringを記憶し、join()方法を用いて最後のstringを作成することである.以下のコードで代替可能である.

var arr = new Array;
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");
上記の方法を使って、どれぐらいのstringがあっても、接続操作は一回だけ発生します.
1.Create a string to store the result.
2.Copy each string into the apprate spot in the result.
しかし、実際の効果はそうではありません.テストコードを書いてもいいです.

function StringBuffer() {
this.__strings__ = new Array;
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
};
StringBuffer.prototype.toString = function () {
return this.__strings__.join("");
};
var d1 = new Date();
var str = "";
for (var i=0; i < 10000000; i++) {
str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + "milliseconds");
var oBuffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000000; i++) {
oBuffer.append("text");
}
var sResult = oBuffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() -
d1.getTime()) + " milliseconds");
最後に、著者らは、実際の状況は、「+」オペレータを使用すると、配列を使用する方法より100~200%の性能を節約するという.
===================================================================================================================================
上は全部この本に書いてあります.実際にテストしてみました.ブラウザによって違いがあります.
IE 9:
Concatension with plus:3036 miliseconds Concation with StringBuffer:1210 miliseconds
Firefox 11.0
Concatension with plus:269 miliseconds Concation with StringBuffer:3245 miliseconds
Chrome 18.0.1 025.152 m
Concatension with plus:3081 miliseconds Concation with StringBuffer:3455 miliseconds
IE 9では、配列を使用する方が効率が高く、「+」操作子の40%だけを使用して、FFの下で、「+」操作子交通は配列方式より大きく優れています.Chromeの下では、2つの方式は同じです.