es el operador + menos eficaz que StringBuffer.append ()

En mi equipo, normalmente hacemos una concatenación de cadenas como esta:

var url = // some dynamically generated URL
var sb = new StringBuffer();
sb.append("<a href='").append(url).append("'>click here</a>");

Obviamente, lo siguiente es mucho más legible:

var url = // some dynamically generated URL
var sb = "<a href='" + url + "'>click here</a>";

Pero los expertos de JS afirman que el +operador es menos eficiente que StringBuffer.append(). ¿Es esto realmente cierto?

Internet Explorer es el único navegador que realmente sufre de esto en el mundo actual. (Las versiones 5, 6 y 7 eran muy lentas. La 8 no muestra la misma degradación). Además, IE se vuelve más y más lento cuanto más larga es la cuerda.

Si tiene cadenas largas para concatenar, definitivamente use una técnica array.join. (O algún envoltorio StringBuffer alrededor de esto, para facilitar la lectura). Pero si sus cadenas son cortas, no se moleste.

Su ejemplo no es bueno ya que es muy poco probable que el rendimiento sea significativamente diferente. En su ejemplo, la legibilidad debería triunfar sobre el rendimiento porque la ganancia de rendimiento de uno frente al otro es insignificante. Los beneficios de una matriz (StringBuffer) solo son evidentes cuando se realizan muchas concatenciones. Incluso entonces, su kilometraje puede depender mucho de su navegador.

A continuación, se muestra un análisis de rendimiento detallado que muestra el rendimiento utilizando los diferentes métodos de concatenación de JavaScript en muchos navegadores diferentes; Análisis de rendimiento de cadenas

Más:
Ajaxian >> Rendimiento de cadenas en IE: Array.join vs + = continúa

Sí, es cierto, pero no debería importarte. Elija el que sea más fácil de leer. Si tiene que comparar su aplicación, concéntrese en los cuellos de botella.

Supongo que la concatenación de cadenas no será su cuello de botella.

De acuerdo con Michael Haren .

También considere el uso de matrices y únase si el rendimiento es realmente un problema.

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));

Prueba esto:

var s = ["<a href='", url, "'>click here</a>"].join("");

Como ya han señalado algunos usuarios: esto es irrelevante para cadenas pequeñas.

Y los nuevos motores de JavaScript en Firefox, Safari o Google Chrome optimizan

"<a href='" + url + "'>click here</a>";

es tan rápido como

["<a href='", url, "'>click here</a>"].join("");

JavaScript no tiene un objeto StringBuffer nativo, así que supongo que esto es de una biblioteca que está usando, o una característica de un entorno de host inusual (es decir, no un navegador).

Dudo que una biblioteca (escrita en JS) produzca algo más rápido, aunque un objeto StringBuffer nativo podría hacerlo. La respuesta definitiva se puede encontrar con un generador de perfiles (si está ejecutando en un navegador, Firebug le proporcionará un generador de perfiles para el motor JS que se encuentra en Firefox).

En palabras de Knuth, "¡la optimización prematura es la raíz de todos los males!" La pequeña diferencia en ambos sentidos probablemente no tendrá mucho efecto al final; Elegiría el más legible.

El método más fácil de leer ahorra a los humanos una cantidad de tiempo perceptible al mirar el código, mientras que el método "más rápido" solo desperdicia cantidades de tiempo imperceptibles y probablemente insignificantes cuando las personas navegan por la página.

Sé que esta publicación es poco convincente, pero accidentalmente publiqué algo completamente diferente pensando que era un hilo diferente y no sé cómo eliminar publicaciones. Culpa mía...

Es bastante fácil configurar un punto de referencia rápido y ver las variaciones de rendimiento de Javascript usando jspref.com . Lo que probablemente no existía cuando se hizo esta pregunta. Pero para las personas que se encuentran con esta pregunta, deberían echar un vistazo al sitio.

Hice una prueba rápida de varios métodos de concatenación en http://jsperf.com/string-concat-methods-test .

Me gusta usar un estilo funcional, como:

function href(url,txt) {
  return "<a href='" +url+ "'>" +txt+ "</a>"
}

function li(txt) {
  return "<li>" +txt+ "</li>"
}

function ul(arr) {
  return "<ul>" + arr.map(li).join("") + "</ul>"
}

document.write(
  ul(
    [
      href("http://url1","link1"),
      href("http://url2","link2"),
      href("http://url3","link3")
    ]
  )
)

Este estilo parece legible y transparente. Conduce a la creación de utilidades que reducen la repetición en el código.

Esto también tiende a utilizar cadenas intermedias automáticamente.

Hasta donde yo sé, cada concatenación implica una reasignación de memoria. Entonces, el problema no es el operador que está acostumbrado a hacerlo, la solución es reducir el número de concatenaciones. Por ejemplo, haga las concatenaciones fuera de las estructuras de iteración cuando pueda.

Sí, según los benchmarks habituales. Por ejemplo: http://mckoss.com/jscript/SpeedTrial.htm .

Pero para las cuerdas pequeñas, esto es irrelevante. Solo te interesarán las interpretaciones con cuerdas muy grandes. Además, en la mayoría de los scripts de JS, el cuello de botella rara vez se encuentra en las manipulaciones de la cadena, ya que no hay suficiente.

Será mejor que observe la manipulación del DOM.