jQuery-performance .css oder addClass

Ich habe eine große jQuery-code, und ich denke auch an die Schnelligkeit meiner Funktionen. Wenn ein element geklickt wird (mousedown) ich brauche die Zuordnung eines Bildes als hintergrund. Ich kann dies tun, indem Sie 2 Möglichkeiten:

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

oder

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

wo "someclass" haben die eigentlichen CSS-Hintergrundbild.
Hexe-Funktion arbeitet in diesem Fall besser.

Gibt es eine Möglichkeit zum testen der verschiedenen Funktionen ist mit der Geschwindigkeit?

Danke

  • Ich glaube nicht, dass es klug, ein Ersatz für den anderen. Mit .css-Methode Festplatte codes der Stil auf das DOM-element und, sofern Sie möchten, sich mit dem Stil (zB. Bildschirm Auflösung ändert), wäre es echt schwierig. Aber .addClass und .removeClass Methoden behandeln, die Sie ziemlich gut.
InformationsquelleAutor Mircea | 2010-02-25
  1. 16

    Ich bin fast sicher .addClass() wäre der schnellere der beiden ist. Dies beinhaltet im wesentlichen Riegeln auf einem anderen classname das element, in der Erwägung, dass die alternative würde erfordern, Durchlaufen die Elemente, Stile und Einstellung viele explizite Regeln.

    Einstellung ein paar css-Regeln über $.css() ist wahrscheinlich nichts zu befürchten, aber wenn Sie finden, sich, viele, oft, es ist Zeit, um eine Klasse erstellen und anwenden/entfernen, wie gebraucht.

    Habe ich extrahiert die Logik beider Methoden in einer einzigen Ort, an dem Sie Lesen, wenn Sie mögen.

    http://pastie.org/842738

    • Auch nicht die Geschwindigkeit/Leistung beziehen, es ist viel einfacher zu ändern, die CSS-Klasse als JS-source-code für die änderung einer Formatvorlage später auf 😉
    • Die Umsetzung von "addClass" ist nicht so schön wie ich gedacht hätte. Es hat eine Menge von re-Scannen der Klasse string beim hinzufügen von mehreren Klassen. Für kurze className Werte, die wahrscheinlich nicht ein problem.
    • Danke Jhonathan. Ich werde bei deinem link. Ich denke auch, dass addClass schneller ist.
    • Also, sagen Sie "fast sicher" ohne Messen alles? Schade. Und, was wirklich zählt, ist die Leistung durch neu zeichnen, so müssen Sie die Zeit, die es braucht für Sie, um erneut die cascading stylesheets, wenn Sie eine Klasse hinzufügen, um eine Anzahl von Elementen. Und Sie scheinen nur die jQuery Teil der Leistung, die ist nur ein Teil des Eisbergs hier. Die Tatsache bleibt, dass, wenn Sie wirklich wollen Leistung, Sie sollten loswerden der jQuery-Teil vollständig und die direkte DOM-manipulation. jQuery ist ein Allgemeines Werkzeug, das schnell auf den code auf, aber fast nie der Schnellste Weg, etwas zu tun.
    InformationsquelleAutor Sampson
  2. 10

    Klasse hinzufügen ist absolut schneller finden Sie in diesem performance-test von $.addClass() vs $.css() vs $.removeClass().addClass() vs plain, js - http://jsperf.com/jquery-css-vs-addclass-speed/2

    • Ihre jsperf sicherlich zeigt, wie die wichtigste Sache zu tun, wenn Sie wollen Leistung ist, überspringen Sie die jQuery-Teil und code direkt auf den DOM. Ein dickes Lob für die Antwort eine performance-Frage mit tatsächlichen Messungen! Ich kann nicht glauben, dass die akzeptierte Antwort auf diese Frage wusste ZERO eigentlichen Messung. Das ist eine Schande in meinem Buch. Man kann einfach nicht zuverlässig beantworten, eine performance-Frage, ohne Messung.
    InformationsquelleAutor Justin McCammon
Schreibe einen Kommentar