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

Question

No meu time, geralmente fazemos corda concatentation assim:

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 JS afirmam que o operador + é menos eficaz do que StringBuffer.append(). Isso é realmente verdade?

Answer 1

Internet Explorer é o único navegador que realmente sofre com esta no mundo de hoje. (não versões 5, 6 e 7 foram cão lento. 8 não mostram a mesma degradação.) Além do mais, IE fica mais lento e mais lento quanto mais o string é.

Se você tem cordas longas para concatenar então definitivamente usar uma técnica Array.join. (Ou algum invólucro StringBuffer em torno deste, para facilitar a leitura.) Mas se as cordas são curtas não incomoda.

Answer 2

Seu exemplo não é um bom em que é muito improvável que o desempenho será signficantly diferente. No seu exemplo legibilidade deve desempenho trunfo porque o ganho de desempenho de um contra o outro é insignificante. Os benefícios de um array (StringBuffer) são apenas aparentes quando você está fazendo muitos concatentations. Mesmo assim, sua milhagem pode muito dependendo do seu navegador.

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

Mais:
Ajaxian >> Desempenho de Cordas em IE: Array.join vs + = continuou

Answer 3

Sim, é verdade, mas você não deve se preocupar. Vá com o que é mais fácil de ler. Se você tem que comparar o seu aplicativo, em seguida, concentrar-se nos pontos de estrangulamento.

Eu diria que concatenação não vai ser o gargalo.

Answer 4

Michael Haren .

Considere também o uso de matrizes e junte-se o desempenho é realmente um problema.

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

Answer 5

Tente isto:

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

Answer 6

JavaScript não tem um objeto StringBuffer nativa, por isso estou assumindo que esta é a partir de uma biblioteca que você está usando, ou uma característica de um ambiente de acolhimento incomum (ou seja, não um navegador).

Eu duvido que uma biblioteca (escrito em JS) iria produzir qualquer coisa mais rápido, embora um nativo StringBuffer objeto poder. A resposta definitiva pode ser encontrada com um profiler (se você estiver executando em um navegador, em seguida, Firebug irá fornecer-lhe com um profiler para o motor JS encontrada no Firefox).

Answer 7

Como já alguns usuários notaram:. Este é irrelevante para pequenas cordas

E novos motores de JavaScript no Firefox, Safari ou otimizar Google Chrome assim

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

é tão rápido quanto

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

Answer 8

Nas palavras de Knuth, "otimização prematura é a raiz de todo o mal!" O pequeno defference de qualquer forma muito provavelmente não terão muito efeito no final; Eu escolheria o mais legível.

Answer 9

O mais fácil método para ler salva humanos quantidades perceptíveis de tempo quando se olha para o código, enquanto que o método apenas resíduos "mais rápido" quantidades imperceptíveis e provavelmente insignificantes de tempo em que as pessoas estão navegando na página.

Eu sei que este post é coxo, mas eu acidentalmente postou algo pensamento totalmente diferente este era um segmento diferente e eu não sei como excluir mensagens. Meu mau ...

Answer 10

É muito fácil de configurar uma referência rápida e check-out variações de desempenho JavaScript usando jspref.com . O que provavelmente não estava por perto quando esta pergunta foi feita. Mas para as pessoas tropeçando sobre esta questão devem tomar alook no local.

Eu fiz um teste rápido de vários métodos de concatenação em http://jsperf.com/string -concat através dos métodos de teste-.

Answer 11

Eu gosto de usar estilo funcional, tais 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 reduz repetição no código.

Isto também tende a usar cordas intermédias automaticamente.

Answer 12

Até eu sei, cada concatenação implica uma realocação de memória. Então o problema não é o operador usado para fazê-lo, a solução é reduzir o número de encadeamentos. Por exemplo fazer as concatenations fora das estruturas de iteração quando puder.

Answer 13

Sim, de acordo com os valores de referência habituais. Por exemplo:. http://mckoss.com/jscript/SpeedTrial.htm

Mas para as pequenas cordas, isso é irrelevante. Você só se preocupam com performances de grandes cadeias. Além do mais, na maioria roteiro JS, o gargalo é raramente sobre as manipulações da corda uma vez que não é suficiente.

É melhor assistir a manipulação DOM.