¿La forma más eficiente de concatenar cadenas en JavaScript?

163

En JavaScript, tengo un bucle que tiene muchas iteraciones, y en cada iteración, estoy creando una gran cadena con muchos +=operadores. ¿Hay una manera más eficiente de crear una cadena? Estaba pensando en crear una matriz dinámica donde sigo agregando cadenas y luego hago una unión. ¿Alguien puede explicar y dar un ejemplo de la forma más rápida de hacer esto?

omega
fuente
2
¿Para qué estás usando la cuerda? Cualquier consejo de rendimiento sobre esto variará según su entorno, los tamaños de sus cadenas, cómo un motor js en particular optimiza diferentes operaciones, etc.
Ben McCormick
1
puede ser un duplicado de stackoverflow.com/questions/7299010/…
rab
55
Consulte este enlace jsperf.com/join-concat/2
rab
Estoy usando IE9 pero está en modo de compatibilidad IE8 (que no puedo cambiar). La cadena enorme es algo que insertaré en el DOM usando jquery.
omega
Consulte también Concatenación de cadenas JavaScript
Bergi

Respuestas:

135

Parece basado en puntos de referencia en JSPerf que usar +=es el método más rápido, aunque no necesariamente en todos los navegadores.

Para construir cadenas en el DOM, parece mejor concatenar la cadena primero y luego agregarla al DOM, en lugar de agregarla iterativamente a la dom. Sin embargo, debe comparar su propio caso.

(Gracias @zAlbee por la corrección)

Jakub Hampl
fuente
1
Mira en la página vinculada. Parece que hay poca diferencia entre +=y hacer una unión en una matriz.
Jakub Hampl
Parece que agregarlo al DOM para cada cadena es 66%(para IE9) más rápido que crear una cadena y luego agregar la cadena al DOM.
omega
la página vinculada usa + = para ambas pruebas, sin .join () a la vista, por lo que es una prueba sin sentido que solo muestra el ruido como una "diferencia". Un buen ejemplo de lo ruidoso que puede ser js ... dom es más lento que una cadena, así que úsalo con moderación.
dandavis
El tiempo es solo un componente. Para las rutinas iterativas, me pregunto cuál es el impacto para GC entre los diversos métodos.
David Bradley
Para cadenas grandes, array.join puede ser preferible debido al muy desagradable error de memoria de string concat bugs.chromium.org/p/v8/issues/detail?id=3175
mwag
70

No tengo ningún comentario sobre la concatenación en sí, pero me gustaría señalar que la sugerencia de @Jakub Hampl:

Para construir cadenas en el DOM, en algunos casos podría ser mejor agregar iterativamente al DOM, en lugar de agregar una cadena enorme a la vez.

está mal, porque se basa en una prueba defectuosa. Esa prueba nunca se agrega al DOM.

Esta prueba fija muestra que crear la cadena de una vez antes de renderizarla es mucho, MUCHO más rápido. Ni siquiera es un concurso.

(Lo siento, esta es una respuesta por separado, pero todavía no tengo suficiente representante para comentar las respuestas).

zAlbee
fuente
44
Creo que vale la pena ser una respuesta en sí misma porque contiene una prueba y una conclusión (aunque la prueba está basada / inspirada en otra respuesta, eso debería estar bien), no hay necesidad de disculparse.
user202729
14

Hace tres años desde que se respondió esta pregunta, pero daré mi respuesta de todos modos :)

En realidad, la respuesta aceptada no es completamente correcta. La prueba de Jakub utiliza una cadena codificada que permite al motor JS optimizar la ejecución del código (¡el V8 de Google es realmente bueno en esto!). Pero tan pronto como use cadenas completamente aleatorias ( aquí está JSPerf ), la concatenación de cadenas estará en un segundo lugar.

Volodymyr Usarskyy
fuente
Curiosamente, con Chrome 54 y Firefox 45 en mi máquina Windows, concat es más del doble de rápido que los otros dos que usan su versión. IE 11 tiene los tres tan lentos como el no concat en los otros dos navegadores.
ShawnFumo
44
Es diferente de una versión a otra. Supongo que en este momento, la máquina virtual de Chrome podría contener una optimización previa para este caso. Probé nuevamente en Chrome v53 y la concatenación ahora es la solución más rápida: D El mismo hardware pero una versión diferente de Chrome ofrece resultados totalmente diferentes.
Volodymyr Usarskyy