文字列結合の演算子によるパフォーマンスの違い

[programming]

ある文字列の末尾に文字列を追加するような処理を書く場合、演算子の使い方により、下記のような2パターンの書き方があります。

  • ptn1: a = a + b;
  • ptn2: a += b;

結果は同じですが、場合によってはパフォーマンスに差があるようなので、実際どれくらいの差があるのか測定してみました。
手元の環境で、結合パターン毎にIE、FireFox、Operaで測定した結果は下記になります。

例1 'abcdefghij'を20000回繰り返した文字列を作成する

var a = '';
var b = 'abcdefghij'; // 10 char

for (var i = 0; i < 20000; i++) {
  a = a + b; // ptn1
  a += b; // ptn2
}
  • IE
    • ptn1: 4900ms
    • ptn2: 4950ms
  • FireFox 1.5
    • ptn1: 60ms
    • ptn2: 60ms
  • Opera 8.5
    • ptn1: 30ms
    • ptn2: 30ms

例2 'abcdefghij' + 数字(0〜19999)を、20000回繰り返した文字列を作成

var a = '';
var b = 'abcdefghij'; // 10 char

for (var i = 0; i < 20000; i++) {
  a = a + b + i; // ptn1
  a += b + i; // ptn2
}
  • IE
    • ptn1: 22730ms
    • ptn2: 10700ms
  • FireFox 1.5
    • ptn1: 250ms
    • ptn2: 380ms
  • Opera 8.5
    • ptn1: 80ms
    • ptn2: 80ms

例3 'abcdefghij' + 数字(0〜19999)をdivタグで囲んで、20000回繰り返した文字列を作成

var a = '';
var b = 'abcdefghij'; // 10 char
var start = '<div>';
var end   = '</div>';

for (var i = 0; i < 20000; i++) {
  a = a + start + b + i + end; // ptn1
  a += start + b + i + end; // ptn2
}
  • IE
    • ptn1: 112400ms
    • ptn2: 27240ms
  • FireFox 1.5
    • ptn1: 450ms
    • ptn2: 500ms
  • Opera 8.5
    • ptn1: 120ms
    • ptn2: 150ms

まとめ

IEでは、右辺で文字列の結合式が増えるにつれ、=+と+=の場合で差がどんどん広がっていきました。例3のような場合(右辺で4つの文字列を結合)では、その差はとてつもないです。
FireFox、Operaでは、それほど差は感じられませんでした。(逆に、+=とした場合の方が微妙に遅かった。誤差の範囲か？)

今までは、どっちの書き方でも差が無いと思っていたので、特に気にしていませんでしたが、これからは必ず+=で書くクセを付けていこうと思います。
それにしても、IEはJavaScriptの実行速度が遅いですね… IE7.0に期待でしょうか。

なお、例1の場合のような同じ文字列の繰り返しを作成する場合には、Array#joinを使うともっと早くなるようです。
参考：最速インターフェース研究会 :: 実践JavaScriptリファクタリング