+ 演算子は StringBuffer.append() よりもパフォーマンスが低くなります

StackOverflow https://stackoverflow.com/questions/112158

質問

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

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(). 。これは本当ですか？

役に立ちましたか？

解決

今日の世界でこの問題に本当に悩まされているブラウザは Internet Explorer だけです。(バージョン 5、6、7 は非常に遅かったです。8 では同様の低下は見られません。) さらに、文字列が長くなると、IE の速度はますます遅くなります。

連結する長い文字列がある場合は、必ず array.join テクニックを使用してください。(または、読みやすくするために、これを StringBuffer ラッパーで囲みます。) ただし、文字列が短い場合でも気にする必要はありません。

他のヒント

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

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

join() once, concat() once, join() for, += for, concat() for

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

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

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

に同意する マイケル・ハーレン.

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

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));

これを試して：

var s = ["<a href='", url, "'>click here</a>"].join("");

JavaScript にはネイティブの StringBuffer オブジェクトがないため、これは使用しているライブラリ、または通常とは異なるホスト環境 (つまり、ブラウザではありません）。

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

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

また、Firefox、Safari、Google Chrome の新しい JavaScript エンジンは最適化を行うため、

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

と同じくらい速いです

["<a href='", url, "'>click here</a>"].join("");

Knuthの言葉では、「時期尚早の最適化はすべての悪の根源です！」どちらの方法でも、小さな偏見は、最終的にはあまり効果がないでしょう。読みやすい方を選ぶと思います。

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

この投稿がつまらないことはわかっていますが、別のスレッドだと思って誤ってまったく別の内容を投稿してしまい、投稿を削除する方法がわかりません。私の悪い...

簡単なベンチマークを設定し、JavaScript のパフォーマンスの変動をチェックするのは非常に簡単です。 jspref.com. 。おそらく、この質問が行われたときには存在しませんでした。しかし、この質問でつまずいた人は、このサイトを見てください。

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

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

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")
    ]
  )
)

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

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

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

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

しかし、小さな文字列の場合、これは関係ありません。非常に大きな弦での演奏のみを考慮する必要があります。さらに、ほとんどの JS スクリプトでは、文字列操作が十分ではないため、ボトルネックが文字列操作にあることはほとんどありません。

DOM の操作を観察したほうがよいでしょう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top