91

私のチームでは、通常、次のように文字列連結を行います。

var url = // some dynamically generated URL
var sb = new StringBuffer();
sb.append("<a href='").append(url).append("'>click here</a>");

明らかに、次のほうがはるかに読みやすいです。

var url = // some dynamically generated URL
var sb = "<a href='" + url + "'>click here</a>";

しかし、JS の専門家は、+演算子は よりもパフォーマンスが低いと主張していStringBuffer.append()ます。これは本当ですか？

4

13 に答える 13

102

パフォーマンスが大幅に異なる可能性はほとんどないという点で、あなたの例は良いものではありません。あなたの例では、一方と他方のパフォーマンスの向上は無視できるため、読みやすさはパフォーマンスよりも優先されるはずです。配列 (StringBuffer) の利点は、多くの連結を行っている場合にのみ明らかになります。それでも、マイレージはブラウザによって大きく異なります。

これは、さまざまなブラウザーでさまざまな JavaScript 連結メソッドをすべて使用した場合のパフォーマンスを示す詳細なパフォーマンス分析です。弦の演奏と分析

join() 1 回、concat() 1 回、join() の場合、+= の場合、concat() の場合

詳細:
Ajaxian >> IE での文字列パフォーマンス: Array.join と += 続き

于 2008-09-21T21:10:29.587 に答える
46

Internet Explorer は、今日の世界でこの問題に悩まされている唯一のブラウザーです。(バージョン 5、6、および 7 は非常に低速でした。8 では同じ劣化は見られません。)さらに、IE は文字列が長くなるほど遅くなります。

連結する長い文字列がある場合は、間違いなく array.join 手法を使用してください。(または、読みやすくするために、これを StringBuffer ラッパーで囲みます。)しかし、文字列が短い場合は気にしないでください。

于 2008-09-21T22:26:10.077 に答える
37

はい、それは本当ですが、気にする必要はありません。読みやすい方でどうぞ。アプリのベンチマークを行う必要がある場合は、ボトルネックに注目してください。

文字列の連結がボトルネックになることはないと思います。

于 2008-09-21T21:06:21.547 に答える
32

マイケル・ハーレンに同意。

パフォーマンスが実際に問題になる場合は、配列と結合の使用も検討してください。

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));
于 2008-09-21T21:10:37.920 に答える
18

これを試して：

var s = ["<a href='", url, "'>click here</a>"].join("");
于 2008-09-21T21:08:14.790 に答える
8

すでに一部のユーザーが指摘しているように、これは小さな文字列には関係ありません。

また、Firefox、Safari、またはGoogle Chromeの新しいJavaScriptエンジンは、最適化されています。

"<a href='" + url + "'>click here</a>";

と同じくらい速い

["<a href='", url, "'>click here</a>"].join("");
于 2008-09-21T21:20:39.377 に答える
8

JavaScript にはネイティブの StringBuffer オブジェクトがないため、これは使用しているライブラリ、または通常とは異なるホスト環境 (つまり、ブラウザーではない) の機能によるものであると想定しています。

ライブラリ (JS で作成されたもの) がより高速に生成されるとは思えませんが、ネイティブの StringBuffer オブジェクトは可能です。決定的な答えはプロファイラーで見つけることができます (ブラウザーで実行している場合、Firebug は Firefox にある JS エンジン用のプロファイラーを提供します)。

于 2008-09-21T21:08:28.547 に答える
6

Knuth の言葉を借りれば、「時期尚早の最適化は諸悪の根源です!」いずれにせよ小さな違いは、最終的にはほとんど影響を与えません。より読みやすいものを選択します。

于 2008-09-21T21:08:36.987 に答える
4

読みやすい方法は、コードを見るときに人間が知覚できる時間を節約しますが、「高速」の方法は、人々がページを閲覧しているときに、知覚できない、おそらく無視できる時間を無駄にするだけです。

この投稿が不完全であることは知っていますが、これは別のスレッドであり、投稿を削除する方法がわからないと思って、誤ってまったく異なるものを投稿しました。私の悪い...

于 2012-12-03T08:55:29.477 に答える
3

jspref.comを使用して、簡単なベンチマークを設定し、Javascriptのパフォーマンスのバリエーションを確認するのは非常に簡単です。この質問がされたとき、それはおそらく周りにありませんでした。しかし、この質問に出くわした人は、サイトを見てみる必要があります。

http://jsperf.com/string-concat-methods-testで、さまざまな連結方法の簡単なテストを行いました。

于 2012-09-21T20:42:40.860 に答える
2

次のような機能的なスタイルを使用するのが好きです。

function href(url,txt) {
  return "<a href='" +url+ "'>" +txt+ "</a>"
}

function li(txt) {
  return "<li>" +txt+ "</li>"
}

function ul(arr) {
  return "<ul>" + arr.map(li).join("") + "</ul>"
}

document.write(
  ul(
    [
      href("http://url1","link1"),
      href("http://url2","link2"),
      href("http://url3","link3")
    ]
  )
)

このスタイルは読みやすく透明に見えます。コードの繰り返しを減らすユーティリティの作成につながります。

これも中間文字列を自動的に使用する傾向があります。

于 2011-08-07T04:14:27.023 に答える
1

私の知る限り、すべての連結はメモリの再割り当てを意味します。したがって、問題はそれを行うために使用される演算子ではなく、解決策は連結の数を減らすことです。たとえば、可能な場合は、反復構造の外部で連結を実行します。

于 2008-09-21T21:12:35.200 に答える
0

はい、通常のベンチマークによると。例: http://mckoss.com/jscript/SpeedTrial.htm .

しかし、小さな弦の場合、これは関係ありません。非常に大きな文字列でのパフォーマンスのみを気にします。さらに、ほとんどの JS スクリプトでは、ボトルネックが文字列操作にあることはめったにありません。

DOM の操作を監視することをお勧めします。

于 2008-09-21T21:10:06.267 に答える