Der effizienteste Weg, um Strings in JavaScript zu verketten?

163

In JavaScript habe ich eine Schleife mit vielen Iterationen, und in jeder Iteration erstelle ich eine große Zeichenfolge mit vielen +=Operatoren. Gibt es eine effizientere Möglichkeit, eine Zeichenfolge zu erstellen? Ich habe darüber nachgedacht, ein dynamisches Array zu erstellen, in dem ich immer wieder Zeichenfolgen hinzufüge und dann einen Join mache. Kann jemand erklären und ein Beispiel geben, wie dies am schnellsten geht?

javascript string performance concatenation Omega
quelle
2
Wofür verwenden Sie die Zeichenfolge? Alle diesbezüglichen Leistungstipps hängen von Ihrer Umgebung, der Größe Ihrer Saiten, der Optimierung verschiedener Vorgänge durch eine bestimmte JS-Engine usw. ab.
Ben McCormick,
1
kann ein Duplikat von stackoverflow.com/questions/7299010/… sein
rab
5
Prüfen Sie diesen Link jsperf.com/join-concat/2
rab
Ich verwende IE9, aber es befindet sich im IE8-Kompatibilitätsmodus (den ich nicht ändern kann). Die riesige Zeichenfolge werde ich mit jquery in das DOM einfügen.
Omega
Siehe auch JavaScript-String-Verkettung
Bergi

Antworten:

135

Scheint basierend auf Benchmarks bei JSPerf, dass die Verwendung +=die schnellste Methode ist, wenn auch nicht unbedingt in jedem Browser.

Zum Erstellen von Zeichenfolgen im DOM scheint es besser zu sein, die Zeichenfolge zuerst zu verketten und dann zum DOM hinzuzufügen, anstatt sie iterativ zum Dom hinzuzufügen. Sie sollten jedoch Ihren eigenen Fall bewerten.

(Danke @zAlbee für die Korrektur)

Jakub Hampl
quelle
1
Schauen Sie in die verlinkte Seite. Es scheint kaum einen Unterschied zu geben, ob +=ein Array verknüpft wird oder nicht.
Jakub Hampl
Es scheint, dass das Hinzufügen zum DOM für jede Zeichenfolge 66%(für IE9) schneller ist als das Erstellen einer Zeichenfolge und das anschließende Hinzufügen der Zeichenfolge zum DOM.
Omega
Die verlinkte Seite verwendet + = für beide Tests, ohne dass .join () in Sicht ist. Es handelt sich also um einen bedeutungslosen Test, bei dem nur Rauschen als "Unterschied" angezeigt wird. gutes Beispiel dafür, wie laut js sein kann ... dom ist langsamer als string, also benutze es sparsam.
Dandavis
Zeit ist nur eine Komponente. Bei iterativen Routinen frage ich mich, welche Auswirkungen die verschiedenen Methoden auf die GC haben.
David Bradley
Für große Strings kann array.join aufgrund des sehr unangenehmen Speicherfehlers von string concat vorzuziehen sein bugs.chromium.org/p/v8/issues/detail?id=3175
mwag
70

Ich habe keinen Kommentar zur Verkettung selbst, möchte aber auf den Vorschlag von @Jakub Hampl hinweisen:

In einigen Fällen ist es zum Erstellen von Zeichenfolgen im DOM möglicherweise besser, iterativ zum DOM hinzuzufügen, als sofort eine große Zeichenfolge hinzuzufügen.

ist falsch, weil es auf einem fehlerhaften Test basiert. Dieser Test wird nie an das DOM angehängt.

Dieser feste Test zeigt, dass das Erstellen der Zeichenfolge auf einmal vor dem Rendern viel, VIEL schneller ist. Es ist nicht einmal ein Wettbewerb.

(Entschuldigung, dies ist eine separate Antwort, aber ich habe noch nicht genug Vertreter, um die Antworten zu kommentieren.)

zAlbee
quelle
4
Ich denke, es lohnt sich, eine Antwort auf sich selbst zu sein, da sie einen Test und eine Schlussfolgerung enthält (obwohl der Test auf einer anderen Antwort basiert / inspiriert ist, sollte das in Ordnung sein), ohne dass es einer Entschuldigung bedarf.
user202729
14

Vor drei Jahren, seit diese Frage beantwortet wurde, werde ich meine Antwort trotzdem geben :)

Tatsächlich ist die akzeptierte Antwort nicht vollständig korrekt. Jakubs Test verwendet eine fest codierte Zeichenfolge, mit der die JS-Engine die Codeausführung optimieren kann (Googles V8 ist in diesem Bereich wirklich gut!). Sobald Sie jedoch vollständig zufällige Zeichenfolgen verwenden ( hier ist JSPerf ), steht die Verkettung der Zeichenfolgen an zweiter Stelle.

Volodymyr Usarskyy
quelle
Interessanterweise ist concat mit Chrome 54 und Firefox 45 auf meinem Windows-Computer mehr als doppelt so schnell wie die beiden anderen, die Ihre Version verwenden. IE 11 hat alle drei so langsam wie das Nicht-Concat in den beiden anderen Browsern.
ShawnFumo
4
Es ist von Version zu Version unterschiedlich. Ich denke, im Moment könnte die VM von Chrome eine Voroptimierung für diesen Fall enthalten. Ich habe erneut auf Chrome v53 getestet und die Verkettung ist jetzt die schnellste Lösung: D Gleiche Hardware, aber unterschiedliche Chrome-Versionen liefern völlig unterschiedliche Ergebnisse.
Volodymyr Usarskyy