jQuery addClass vs. JS className
-
Hallo Community,
ich beschöftige mich momentan intensiver mit der Performanceoptimierung von JavaScript (und Frameworks). Dabei habe ich gestern einen sehr einfachen Test erstellt, der jQuery mit nativem JavaScript vergleicht, wenn es um die Vergabe von Klassennamen für ein DOM-Element geht.
Hier der Test: http://jsperf.com/jq-addclass-vs-js-classname
Das Resultat hätte ich nie erwartet, dass element.className bei der Vergabe so viel schlechter abschneidet als die jQuery-Variante. Ich ging grundsätzlich davon aus, dass "natives JS" prinzipiell schneller ist als ein Framework.
Kann mir jemand erklären wie es dazu kommen kann? Vielen Dank im Voraus
-
du spast, die beiden funktionen machen doch was anderes...
als hinweis, du vergleichst einen stringvergleich mit einer speicheranforderung...
-
Spast? Speicheranforderung? ... lass gut sein. Ich werde mir an anderen Stellen Informationen suchen.
Die netten Zeiten hier, selbst als passiver Forenkonsument sind wohl doch vorbei. Sehr schade.
-
fahr zur js hölle
-
-
Also der spast-typ hat gar nicht so unrecht:
Ausschlaggebend für den Performanceeinbruch ist wohl der Operator bzw. die Stringkonkatenation:
aTag.className += " baz";Ich weiss jetzt nicht genau wie JavaScript Strings verwaltet, aber ich kann mir vorstellen, dass diese (wie in vielen anderen Sprachen auch) immutable sind, dh dass bei einer Veränderung des Wertes einer Instanz, diese nicht verändert wird sondern eine neue erzeugt wird. Und diese Objekt erzeugung ist teuer (Thema: Speicherverwaltung).
Wie man sieht ist die Listenverarbeitung der class-Attribute am schnellsten, daher nehme ich an, dass jQuery intern diese verwendet (und noch irgendwelchen "Framework-Kram" drumherum strickt).
-
Jau, sind in JavaScript immutable.
Builder wär angebracht
http://blog.codeeffects.com/Article/String-Builder-In-Java-Script
Für den einen oder andern vll nützlich oder einfach nur interessant, diese Antwort -> http://stackoverflow.com/questions/51185/are-javascript-strings-immutable-do-i-need-a-string-builder-in-js#answer-4717855
