JavaScriptでは、多くの反復を含むループがあり、各反復で、多くの+=
演算子を含む巨大な文字列を作成しています。文字列を作成するより効率的な方法はありますか?文字列を追加し続けて結合を行う動的配列を作成することを考えていました。誰もがこれを行う最も速い方法の例を説明して与えることができますか?
JavaScriptでは、多くの反復を含むループがあり、各反復で、多くの+=
演算子を含む巨大な文字列を作成しています。文字列を作成するより効率的な方法はありますか?文字列を追加し続けて結合を行う動的配列を作成することを考えていました。誰もがこれを行う最も速い方法の例を説明して与えることができますか?
回答:
JSPerfのベンチマークに基づくと+=
、すべてのブラウザで使用できるわけではありませんが、使用するのが最速の方法です。
DOMで文字列を作成する場合は、最初に文字列を連結してからDOMに追加する方が、DOMに繰り返し追加するよりも良いようです。ただし、自分のケースのベンチマークを行う必要があります。
(@zAlbeeの訂正に感謝)
+=
配列の結合と配列の結合にはほとんど違いがないようです。
66%
(IE9の場合)文字列を作成してDOMに追加するよりも速いようです。
連結自体についてはコメントしませんが、@ Jakub Hamplの提案を指摘したいと思います。
DOMで文字列を作成する場合、巨大な文字列を一度に追加するよりも、DOMに繰り返し追加する方が良い場合があります。
それは欠陥のあるテストに基づいているため、間違っています。そのテストが実際にDOMに追加されることはありません。
この修正済みのテストは、レンダリングする前に文字列を一度に作成する方がはるかに高速であることを示しています。それもコンテストではありません。
(申し訳ありませんが、これは別の回答ですが、回答にコメントするのに十分な担当者がいません)。
この質問への回答から3年が経過しましたが、とにかく私の回答を提供します:)
実際、受け入れられた答えは完全に正しくはありません。Jakubのテストは、JSエンジンがコード実行を最適化できるようにするハードコードされた文字列を使用します(GoogleのV8はこの点で本当に優れています!)しかし、完全にランダムな文字列(ここではJSPerfです)を使用するとすぐに、文字列の連結は2番目になります。
テンプレートリテラルを使用して文字列連結を行うこともできます。他のポスターのJSPerfテストを更新して、それを含めました。
for (var res = '', i = 0; i < data.length; i++) {
res = `${res}${data[i]}`;
}