è l'operatore + meno performante di StringBuffer.append ()

Nel mio team, di solito facciamo la concatentazione di stringhe in questo modo:

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

Ovviamente il seguente è molto più leggibile:

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

Ma gli esperti JS affermano che l' +operatore è meno performante di StringBuffer.append(). È proprio vero?

Internet Explorer è l'unico browser che ne soffre davvero nel mondo di oggi. (Le versioni 5, 6 e 7 erano lente come il cane. 8 non mostra la stessa degradazione.) Inoltre, IE diventa sempre più lento quanto più lunga è la tua corda.

Se hai stringhe lunghe da concatenare, usa sicuramente una tecnica array.join. (O un wrapper StringBuffer attorno a questo, per leggibilità.) Ma se le tue stringhe sono corte non preoccuparti.

Il tuo esempio non è buono in quanto è molto improbabile che la performance sarà significativamente diversa. Nel tuo esempio la leggibilità dovrebbe prevalere sulle prestazioni perché il guadagno in termini di prestazioni dell'uno rispetto all'altro è trascurabile. I vantaggi di un array (StringBuffer) sono evidenti solo quando si eseguono molte concatentazioni. Anche in questo caso il tuo chilometraggio può dipendere molto dal tuo browser.

Ecco un'analisi dettagliata delle prestazioni che mostra le prestazioni utilizzando tutti i diversi metodi di concatenazione JavaScript su molti browser diversi; Prestazioni delle stringhe e analisi

Altro:
Ajaxian >> Prestazioni delle stringhe in IE: Array.join vs + = continua

Sì, è vero ma non dovrebbe importarti. Scegli quello più facile da leggere. Se devi confrontare la tua app, concentrati sui colli di bottiglia.

Immagino che la concatenazione di stringhe non sarà il tuo collo di bottiglia.

D'accordo con Michael Haren .

Considera anche l'uso di array e unisciti se le prestazioni sono davvero un problema.

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

Prova questo:

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

Come già notato da alcuni utenti: questo è irrilevante per stringhe piccole.

E i nuovi motori JavaScript in Firefox, Safari o Google Chrome ottimizzano così

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

è veloce quanto

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

JavaScript non ha un oggetto StringBuffer nativo, quindi presumo che provenga da una libreria che stai utilizzando o da una funzionalità di un ambiente host insolito (cioè non un browser).

Dubito che una libreria (scritta in JS) produrrebbe qualcosa di più veloce, anche se potrebbe farlo un oggetto StringBuffer nativo. La risposta definitiva può essere trovata con un profiler (se stai utilizzando un browser, Firebug ti fornirà un profiler per il motore JS trovato in Firefox).

Nelle parole di Knuth, "l'ottimizzazione prematura è la radice di tutti i mali!" La piccola differenza in entrambi i casi molto probabilmente non avrà molto effetto alla fine; Sceglierei quello più leggibile.

Il metodo più facile da leggere fa risparmiare agli esseri umani quantità di tempo percettibili quando guardano il codice, mentre il metodo "più veloce" spreca solo quantità di tempo impercettibili e probabilmente trascurabili quando le persone stanno navigando nella pagina.

So che questo post è scadente, ma ho accidentalmente pubblicato qualcosa di completamente diverso pensando che fosse un thread diverso e non so come eliminare i post. Colpa mia...

È abbastanza facile impostare un benchmark veloce e controllare le variazioni delle prestazioni di Javascript utilizzando jspref.com . Che probabilmente non c'era quando è stata posta questa domanda. Ma per le persone che si imbattono in questa domanda dovrebbero dare un'occhiata al sito.

Ho fatto un rapido test di vari metodi di concatenazione su http://jsperf.com/string-concat-methods-test .

Mi piace usare uno stile funzionale, come ad esempio:

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")
    ]
  )
)

Questo stile sembra leggibile e trasparente. Porta alla creazione di utilità che riducono la ripetizione nel codice.

Questo tende anche a utilizzare automaticamente stringhe intermedie.

Per quanto ne so, ogni concatenazione implica una riallocazione della memoria. Quindi il problema non è l'operatore utilizzato per farlo, la soluzione è ridurre il numero di concatenazioni. Ad esempio, fai le concatenazioni al di fuori delle strutture di iterazione quando puoi.

Sì, secondo i soliti benchmark. EG: http://mckoss.com/jscript/SpeedTrial.htm .

Ma per le corde piccole, questo è irrilevante. Ti interesseranno solo le esibizioni su corde molto grandi. Inoltre, nella maggior parte degli script JS, il collo di bottiglia è raramente sulle manipolazioni delle stringhe poiché non ce n'è abbastanza.

Faresti meglio a guardare la manipolazione del DOM.