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

StackOverflow https://stackoverflow.com/questions/112158

Domanda

Nella mia squadra, di solito facciamo concatenazioni 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 quanto segue è molto più leggibile: 

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

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

È stato utile?

Soluzione

Internet Explorer è l'unico browser che soffre davvero di questo nel mondo di oggi. (Le versioni 5, 6 e 7 erano cane lento. 8 non mostra lo stesso degrado.) Inoltre, IE diventa sempre più lento quanto più lunga è la tua stringa.

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

Altri suggerimenti

Il tuo esempio non è buono in quanto è molto improbabile che le prestazioni siano significativamente diverse. Nel tuo esempio la leggibilità dovrebbe superare le 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 concatenazioni. Anche allora 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; Performance delle stringhe un'analisi

join () una volta, concat () una volta, join () per, + = for, concat () per

Più:
Ajaxian > > Prestazioni di stringa in IE: Array.join vs + = continua

Sì, è vero, ma non dovresti preoccupartene. Vai con quello che è più facile da leggere. Se devi eseguire il benchmark della tua app, concentrati sui colli di bottiglia.

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

Concordato 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("");

JavaScript non ha un oggetto StringBuffer nativo, quindi presumo che provenga da una libreria in uso o da una funzionalità di un ambiente host insolito (ovvero non un browser).

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

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

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("");

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

Il metodo più facile da leggere fa risparmiare agli umani una quantità di tempo percettibile quando si guarda il codice, mentre il "più veloce" metodo spreca solo quantità di tempo impercettibili e probabilmente trascurabili quando le persone navigano nella pagina.

So che questo post è scadente, ma ho accidentalmente pubblicato qualcosa di completamente diverso pensando che si trattasse di un thread diverso e non so come eliminare i post. Mio cattivo ...

È abbastanza semplice impostare un benchmark rapido e controllare le variazioni delle prestazioni Javascript utilizzando jspref.com . Che probabilmente non c'era quando è stata posta questa domanda. Ma per le persone che inciampano su questa domanda dovrebbero dare un'occhiata al sito.

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

Mi piace usare lo 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 riduce la ripetizione nel codice.

Questo tende anche a usare automaticamente le 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, quando possibile puoi concatenare al di fuori delle strutture di iterazione.

Sì, secondo i soliti parametri di riferimento. Ad esempio: http://mckoss.com/jscript/SpeedTrial.htm .

Ma per le stringhe piccole, questo è irrilevante. Ti interesserai solo delle esecuzioni su archi 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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top