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

Question

Auf meinem Team, wir String concatentation wie dies in der Regel tun:

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

Offensichtlich ist die folgende ist viel besser lesbar:

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

Aber Die JS-Experten behaupten, dass der Operator + weniger performant ist als StringBuffer.append(). Ist das wirklich wahr?

Answer 1

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

Wenn Sie lange Ketten verketten müssen, verwenden Sie definitiv eine array.join-Technik. (Oder etwas StringBuffer-Wrapper um dies für Lesbarkeit.) Aber wenn Ihre Strings kurz sind, nicht stören.

Answer 2

Ja, es ist wahr, aber Sie sollten sich nicht kümmern. Geh mit dem, der leichter zu lesen ist. Wenn Sie Ihre App benchmarken müssen, konzentrieren Sie sich auf die Engpässe.

Ich würde vermuten, dass String-Verkettung wird nicht Ihr Engpass sein.

Answer 3

Versuchen Sie folgendes:

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

Answer 4

JavaScript keinen nativen String Objekt, so dass ich davon aus, das aus einer Bibliothek, die Sie verwenden, oder ein Merkmal eines ungewöhnlichen Host-Umgebung (dh kein Browser).

Ich bezweifle, dass eine Bibliothek (geschrieben in JS) etwas schneller produzieren würde, obwohl ein natives StringBuffer-Objekt möglicherweise. Die definitive Antwort kann mit einem Profiler gefunden werden (wenn Sie in einem Browser arbeiten, wird Firebug Ihnen einen Profiler für die JS-Engine in Firefox zur Verfügung stellen).

Answer 5

In den Worten von Knuth ist "vorzeitige Optimierung die Wurzel allen Übels!" Der kleine Unterschied wird wahrscheinlich am Ende nicht viel bewirken; Ich würde den besser lesbaren wählen.

Answer 6

Ja, nach den üblichen Benchmarks. E.G: http://mckoss.com/jscript/SpeedTrial.htm.

Aber für die kleinen Saiten ist dies irrelevant. Sie werden sich nur für Performances auf sehr großen Saiten interessieren. In den meisten JS-Skripten ist der Flaschenhals selten an den String-Manipulationen beteiligt, da nicht genug davon vorhanden ist.

Sie sollten besser die DOM-Manipulation beobachten.

Answer 7

Ihr Beispiel ist nicht gut, da es sehr unwahrscheinlich ist, dass die Leistung wesentlich anders ist. In Ihrem Beispiel sollte die Lesbarkeit die Leistung übertrumpfen, da der Leistungsgewinn von eins gegenüber dem anderen vernachlässigbar ist. Die Vorteile eines Arrays (StringBuffer) sind nur dann offensichtlich, wenn Sie viele Konkatentationen durchführen. Auch dann kann Ihr Kilometerstand sehr von Ihrem Browser abhängen.

Hier ist eine detaillierte Leistungsanalyse, die die Leistung unter Verwendung der verschiedenen JavaScript-Verkettungsmethoden in vielen verschiedenen Browsern zeigt; String Performance an Analysis

Mehr:
Ajaxian >> String Performance in IE: Array.join vs += continued

Answer 8

mit Michael Haren Einverstanden.

Bedenken Sie auch die Verwendung von Arrays und Join, wenn die Leistung tatsächlich ein Problem ist.

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

Answer 9

Soweit ich weiß, impliziert jede Verkettung eine Speicherreallokation. So ist das Problem nicht der Operator, der es tut, die Lösung besteht darin, die Anzahl der Verkettungen zu reduzieren. Zum Beispiel tun Sie die Verkettungen außerhalb der Iterationsstrukturen, wenn Sie können.

Answer 10

Wie schon einige Anwender festgestellt haben: Dies ist für kleine Strings irrelevant.

und neue Motoren JavaScript in Firefox, Safari oder Google Chrome optimieren so

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

als

so schnell ist

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

Answer 11

Ich mag funktionalen Stil verwenden, wie zum Beispiel:

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 sein. Es führt zur Erstellung von Dienstprogrammen, die die Wiederholung im Code reduzieren.

Dies neigt auch dazu, Zwischenzeichenfolgen automatisch zu verwenden.

Answer 12

Es ist ziemlich einfach, einen schnellen Benchmark einzurichten und Javascript-Leistungsvariationen unter Verwendung jspref.com auszuchecken. Das war wahrscheinlich nicht da, als diese Frage gestellt wurde. Aber für Leute, die über diese Frage stolpern, sollten sie sich die Seite ansehen.

Ich habe einen schnellen Test der verschiedenen Methoden der Verkettung bei http://jsperf.com/string-concat-methods-test.

Answer 13

Die leichter zu lesende Methode spart Menschen wahrnehmbare Zeit bei der Betrachtung des Codes, während die "schnellere" Methode nur unmerkliche und wahrscheinlich vernachlässigbare Mengen an Zeit verschwendet, wenn Leute die Seite durchsuchen.

Ich weiß, dass dieser Beitrag lahm ist, aber ich habe versehentlich etwas völlig anderes geschrieben, dass dies ein anderer Thread war und ich nicht weiß, wie man Beiträge löscht. Mein schlechter ...