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

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?

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)

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).

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.

También puede hacer cadenas concat con literales de plantilla . Actualicé las pruebas JSPerf de los otros carteles para incluirlo.

for (var res = '', i = 0; i < data.length; i++) {
  res = `${res}${data[i]}`;
}