ist der Operator + weniger performant als StringBuffer.append ()

In meinem Team konzentrieren wir uns normalerweise wie folgt:

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

Offensichtlich ist Folgendes viel besser lesbar:

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

Die JS-Experten behaupten jedoch, dass der +Bediener weniger leistungsfähig ist als StringBuffer.append(). Ist das wirklich wahr?

Internet Explorer ist der einzige Browser, der in der heutigen Welt wirklich darunter leidet. (Die Versionen 5, 6 und 7 waren hundeschwach. 8 zeigt nicht die gleiche Verschlechterung.) Außerdem wird der IE immer langsamer, je länger Ihre Saite ist.

Wenn Sie lange Zeichenfolgen verketten müssen, verwenden Sie auf jeden Fall eine array.join-Technik. (Oder ein StringBuffer-Wrapper, um die Lesbarkeit zu verbessern.) Aber wenn Ihre Zeichenfolgen kurz sind, stören Sie nicht.

Ihr Beispiel ist insofern nicht gut, als es sehr unwahrscheinlich ist, dass sich die Leistung erheblich unterscheidet. In Ihrem Beispiel sollte die Lesbarkeit die Leistung übertreffen, da der Leistungsgewinn von einem gegenüber dem anderen vernachlässigbar ist. Die Vorteile eines Arrays (StringBuffer) werden nur deutlich, wenn Sie viele Konzentrationen durchführen. Selbst dann kann Ihr Kilometerstand sehr stark von Ihrem Browser abhängen.

Hier ist eine detaillierte Leistungsanalyse, die die Leistung unter Verwendung aller verschiedenen JavaScript-Verkettungsmethoden in vielen verschiedenen Browsern zeigt. String-Leistung und Analyse

Mehr:
Ajaxian >> String-Leistung im IE: Array.join vs + = Fortsetzung

Ja, es ist wahr, aber es sollte dich nicht interessieren. Entscheide dich für die, die leichter zu lesen ist. Wenn Sie Ihre App bewerten müssen, konzentrieren Sie sich auf die Engpässe.

Ich würde vermuten, dass die Verkettung von Zeichenfolgen nicht Ihr Engpass sein wird.

Einverstanden mit Michael Haren .

Berücksichtigen Sie auch die Verwendung von Arrays und Joins, wenn die Leistung tatsächlich ein Problem darstellt.

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

Versuche dies:

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

Wie bereits einige Benutzer bemerkt haben: Dies ist für kleine Zeichenfolgen irrelevant.

Und neue JavaScript-Engines in Firefox, Safari oder Google Chrome optimieren dies

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

ist so schnell wie

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

JavaScript hat kein natives StringBuffer-Objekt, daher gehe ich davon aus, dass es aus einer von Ihnen verwendeten Bibliothek oder einer Funktion einer ungewöhnlichen Host-Umgebung (dh keinem Browser) stammt.

Ich bezweifle, dass eine Bibliothek (in JS geschrieben) etwas schneller produzieren würde, obwohl ein natives StringBuffer-Objekt dies könnte. Die endgültige Antwort finden Sie mit einem Profiler (wenn Sie in einem Browser ausgeführt werden, stellt Firebug Ihnen einen Profiler für die in Firefox enthaltene JS-Engine zur Verfügung).

Mit den Worten von Knuth: "Vorzeitige Optimierung ist die Wurzel allen Übels!" Die geringe Abweichung in beide Richtungen wird am Ende höchstwahrscheinlich keine große Wirkung haben. Ich würde die besser lesbare wählen.

Die leichter zu lesende Methode spart dem Menschen spürbar viel Zeit beim Betrachten des Codes, während die "schnellere" Methode nur unmerklich und wahrscheinlich vernachlässigbar viel Zeit verschwendet, wenn Benutzer die Seite durchsuchen.

Ich weiß, dass dieser Beitrag lahm ist, aber ich habe versehentlich etwas ganz anderes gepostet, weil ich dachte, dies sei ein anderer Thread, und ich weiß nicht, wie ich Beiträge löschen soll. Mein Fehler...

Mit jspref.com ist es ziemlich einfach, einen schnellen Benchmark einzurichten und die Leistungsvarianten von Javascript zu überprüfen . Was wahrscheinlich nicht da war, als diese Frage gestellt wurde. Aber für Leute, die über diese Frage stolpern, sollten sie sich auf der Baustelle umsehen.

Unter http://jsperf.com/string-concat-methods-test habe ich verschiedene Verkettungsmethoden kurz getestet .

Ich verwende gerne funktionale Stile wie:

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

Dieser Stil sieht lesbar und transparent aus. Dies führt zur Erstellung von Dienstprogrammen, die die Wiederholung von Code reduzieren.

Dies neigt auch dazu, Zwischenzeichenfolgen automatisch zu verwenden.

Soweit ich weiß, impliziert jede Verkettung eine Speicherumverteilung. Das Problem ist also nicht der Operator, der dafür verwendet wird. Die Lösung besteht darin, die Anzahl der Verkettungen zu reduzieren. Führen Sie beispielsweise die Verkettungen außerhalb der Iterationsstrukturen durch, wenn Sie können.

Ja, gemäß den üblichen Benchmarks. EG: http://mckoss.com/jscript/SpeedTrial.htm .

Für die kleinen Saiten ist dies jedoch irrelevant. Sie werden sich nur um Auftritte auf sehr großen Saiten kümmern. Darüber hinaus ist in den meisten JS-Skripten der Flaschenhals bei den String-Manipulationen selten, da nicht genug davon vorhanden ist.

Sie sollten die DOM-Manipulation besser beobachten.