2010-02-25 3 views
17

Ich habe einen großen jQuery-Code und ich denke bei der Geschwindigkeit Leistung meiner Funktionen. Wenn auf ein Element geklickt wird (mousedown), muss ich ein Bild als Hintergrund zuweisen. Ich kann dies tun, indem Sie 2 Möglichkeiten:jQuery Leistung, .css oder addClass

$('#element li.class').css({"background":"someimageURL"}); 

oder

$('#element li.class').addClass("someclass"); 

wo "Someclass" das eigentliche CSS Hintergrundbild hat. Hexe Funktion funktioniert in diesem Fall besser.

Gibt es eine Möglichkeit, verschiedene Funktionen Geschwindigkeit zu testen?

Danke

+0

Ich glaube nicht, seine weise eine für das andere zu ersetzen. Mit der .css-Methode wird der Stil fest mit dem DOM-Element codiert, und wenn Sie mit dem Stil (z. B. Änderungen der Bildschirmauflösung) durchkommen wollen, wäre es wirklich schwierig. Die .addClass-Methode und die .removeClass-Methode verarbeiten das jedoch sehr gut. – thethakuri

Antwort

15

ich fast sicher bin .addClass() die schnellere der beiden wäre. Dies bedeutet im Wesentlichen, dass ein anderer Klassenname an das Element angehängt wird, während die Alternative das Iterieren durch die Elementstile und das Setzen vieler expliziter Regeln erfordern würde.

Einstellung ein paar CSS-Regeln über $.css() ist wahrscheinlich nichts zu befürchten, aber wenn Sie sich oft einstellen, ist es oft Zeit, eine Klasse zu erstellen und anwenden/entfernen, wie benötigt.

Ich habe die Logik beider Methoden an einem einzigen Ort extrahiert, damit Sie es überprüfen können, wenn Sie möchten.

http://pastie.org/842738

+4

Auch nicht Geschwindigkeit/Leistung, es ist viel einfacher, eine CSS-Klasse als JS-Quellcode zu ändern, um später einen Stil zu ändern;) – casraf

+0

Die Implementierung von "addClass" ist nicht so ausgefallen wie ich gedacht hätte. Beim Hinzufügen mehrerer Klassen wird die Klassenzeichenfolge erneut gescannt. Für kurze ClassName-Werte ist das wahrscheinlich kein Problem. – Pointy

+0

Danke Jhonathan. Ich werde auf Ihren Link schauen. Ich denke auch, dass addClass schneller ist. – Mircea

9

hinzufügen Klasse absolut schneller ist, lesen Sie diesen Performance-Test von $.addClass() vs $.css() vs $.removeClass().addClass() vs Ebene js - http://jsperf.com/jquery-css-vs-addclass-speed/2

+2

Ihr JSperf zeigt sicherlich, wie wichtig es ist, wenn Sie Leistung wünschen, den jQuery-Teil zu überspringen und direkt zum DOM zu codieren. Kudos zur Beantwortung einer Performance-Frage mit aktuellen Messungen! Ich kann nicht glauben, dass die akzeptierte Antwort auf diese Frage ZERO tatsächlich gemessen hat. Das ist eine Schande in meinem Buch. Sie können eine Leistungsfrage ohne Messung nicht zuverlässig beantworten. – jfriend00