é o operador + com menos desempenho do que StringBuffer.append ()

Na minha equipe, geralmente fazemos concatentação de strings como esta:

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

Obviamente, o seguinte é muito mais legível:

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

Mas os especialistas em JS afirmam que o +operador tem menos desempenho do que StringBuffer.append(). Isso é verdade mesmo?

O Internet Explorer é o único navegador que realmente sofre com isso no mundo de hoje. (As versões 5, 6 e 7 eram lentas como cães. 8 não mostra a mesma degradação.) Além disso, o IE fica cada vez mais lento quanto mais longa a corda.

Se você tiver strings longas para concatenar, use definitivamente uma técnica array.join. (Ou algum wrapper StringBuffer em torno disso, para facilitar a leitura.) Mas se suas strings forem curtas, não se preocupe.

Seu exemplo não é bom porque é muito improvável que o desempenho seja significativamente diferente. Em seu exemplo, a legibilidade deve superar o desempenho porque o ganho de desempenho de um em relação ao outro é insignificante. Os benefícios de uma matriz (StringBuffer) são aparentes apenas quando você está fazendo muitas concatentações. Mesmo assim, sua milhagem pode variar dependendo do seu navegador.

Aqui está uma análise de desempenho detalhada que mostra o desempenho usando todos os diferentes métodos de concatenação JavaScript em muitos navegadores diferentes; Desempenho e análise da coluna

Mais:
Ajaxian >> Desempenho de String no IE: Array.join vs + = continuado

Sim, é verdade, mas você não deve se importar. Escolha aquele que é mais fácil de ler. Se você tiver que avaliar seu aplicativo, concentre-se nos gargalos.

Eu imagino que a concatenação de strings não será o seu gargalo.

Acordado com Michael Haren .

Considere também o uso de arrays e join se o desempenho for realmente um problema.

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

Experimente isto:

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

Como já alguns usuários notaram: Isso é irrelevante para strings pequenas.

E novos mecanismos de JavaScript no Firefox, Safari ou Google Chrome otimizam para

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

é tão rápido quanto

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

JavaScript não tem um objeto StringBuffer nativo, então presumo que seja de uma biblioteca que você está usando ou de um recurso de um ambiente host incomum (ou seja, não é um navegador).

Duvido que uma biblioteca (escrita em JS) produza algo mais rápido, embora um objeto StringBuffer nativo possa. A resposta definitiva pode ser encontrada com um criador de perfil (se você estiver executando em um navegador, o Firebug fornecerá um criador de perfil para o mecanismo JS encontrado no Firefox).

Nas palavras de Knuth, "a otimização prematura é a raiz de todo o mal!" A pequena diferença de qualquer maneira provavelmente não terá muito efeito no final; Eu escolheria o mais legível.

O método mais fácil de ler economiza aos humanos quantidades perceptíveis de tempo ao olhar o código, enquanto o método "mais rápido" desperdiça apenas quantidades de tempo imperceptíveis e provavelmente insignificantes quando as pessoas estão navegando na página.

Eu sei que esta postagem é idiota, mas acidentalmente postei algo totalmente diferente pensando que este era um tópico diferente e não sei como deletar postagens. Foi mal...

É muito fácil configurar um benchmark rápido e verificar as variações de desempenho do Javascript usando jspref.com . Que provavelmente não estava por perto quando esta pergunta foi feita. Mas para as pessoas que estão tropeçando nessa questão, devem dar uma olhada no site.

Fiz um teste rápido de vários métodos de concatenação em http://jsperf.com/string-concat-methods-test .

Gosto de usar um 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 legível e transparente. Isso leva à criação de utilitários que reduzem a repetição no código.

Isso também tende a usar strings intermediárias automaticamente.

Até onde eu sei, cada concatenação implica uma realocação de memória. Então o problema não é o operador utilizado para fazer isso, a solução é reduzir o número de concatenações. Por exemplo, faça as concatenações fora das estruturas de iteração quando puder.

Sim, de acordo com os benchmarks usuais. EX .: http://mckoss.com/jscript/SpeedTrial.htm .

Mas para as cordas pequenas, isso é irrelevante. Você só se preocupará com apresentações em cordas muito grandes. Além do mais, na maioria dos scripts JS, o gargalo raramente está nas manipulações das cordas, uma vez que não há o suficiente.

É melhor você observar a manipulação do DOM.