JavaScriptで文字列を連結する最も効率的な方法は?


163

JavaScriptでは、多くの反復を含むループがあり、各反復で、多くの+=演算子を含む巨大な文字列を作成しています。文字列を作成するより効率的な方法はありますか?文字列を追加し続けて結合を行う動的配列を作成することを考えていました。誰もがこれを行う最も速い方法の例を説明して与えることができますか?


2
文字列を何に使用していますか?この上の任意のパフォーマンスのヒントは、あなたの文字列のサイズは、特定のJSエンジンは、など、さまざまな操作を最適化する方法、ご使用の環境によって異なりしようとしている
ベン・マコーミック


5
このリンクをチェックjsperf.com/join-concat/2
rab

IE9を使用していますが、IE8互換モード(変更できません)です。巨大な文字列は、jqueryを使用してDOMに挿入するものです。
オメガ

回答:


135

JSPerfのベンチマークに基づくと+=、すべてのブラウザで使用できるわけではありませんが、使用するのが最速の方法です。

DOMで文字列を作成する場合、最初に文字列を連結してからDOMに追加する方が、DOMに繰り返し追加するよりも良いようです。ただし、自分のケースのベンチマークを行う必要があります。

(@zAlbeeの訂正に感謝)


1
リンク先のページをご覧ください。+=配列の結合と配列の結合にはほとんど違いがないようです。
Jakub Hampl 2013年

すべての文字列をDOMに追加する方が66%(IE9の場合)文字列を作成してDOMに追加するよりも速いようです。
オメガ

リンクされたページは両方のテストで+ =を使用し、.join()は見えないため、ノイズを「差異」としてのみ表示する無意味なテストです。ノイズの多いjsの良い例ですが、domはstringより遅いので、控えめに使用してください。
dandavis 2013年

時間はほんの一部です。反復ルーチンの場合、さまざまなメソッド間でGCにどのような影響があるのでしょうか。
デビッドブラッドリー

大規模な文字列の場合、array.joinは、文字列の連結の非常に不快なメモリのバグが原因が好ましいかもしれないbugs.chromium.org/p/v8/issues/detail?id=3175
mwag

70

連結自体についてはコメントしませんが、@ Jakub Hamplの提案を指摘したいと思います。

DOMで文字列を作成する場合、巨大な文字列を一度に追加するよりも、DOMに繰り返し追加する方が良い場合があります。

それは欠陥のあるテストに基づいているため、間違っています。そのテストが実際にDOMに追加されることはありません。

この修正済みのテストは、レンダリングする前に文字列を一度に作成する方がはるかに高速であることを示しています。それもコンテストではありません。

(申し訳ありませんが、これは別の回答ですが、回答にコメントするのに十分な担当者がいません)。


4
テストと結論が含まれているため(テストは別の回答に基づいている/影響を受けていますが、問題ないはずです)、申し訳ありません。
user202729

14

この質問への回答から3年が経過しましたが、とにかく私の回答を提供します:)

実際、受け入れられた答えは完全に正しくはありません。Jakubのテストは、JSエンジンがコード実行を最適化できるようにするハードコードされた文字列を使用します(GoogleのV8はこの点で本当に優れています!)しかし、完全にランダムな文字列(ここではJSPerfです)を使用するとすぐに、文字列の連結は2番目になります。


興味深いことに、私のWindowsマシン上のChrome 54とFirefox 45では、concatは、ご使用のバージョンを使用する他の2つよりも2倍以上高速です。IE 11の速度は、他の2つのブラウザーの非連結と同じくらい遅くなります。
ShawnFumo

4
バージョンごとに異なります。今のところ、ChromeのVM​​には、この場合の事前最適化が含まれている可能性があります。Chrome v53で再度テストしましたが、連結が最速のソリューションになりました:D同じハードウェアですが、Chromeのバージョンが異なると、結果もまったく異なります。
Volodymyr Usarskyy 2016年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.