Optimierung von jQuery selector / addBack () beim Umgang mit einer großen Sammlung
Ich benutze jQuery, um CSS-Klassen absichtlich von Elementen in einer möglicherweise großen HTML-Tabelle zu entfernen. Siehe unten für eine Erklärung, warum ich das tue.
Momentan mache ich es so:
%Vor%Der Tisch ist manchmal groß und hat viele Elemente. Ich möchte die Seitenlade- / DOM-Manipulation beschleunigen.
Der integrierte JavaScript-Profiler des IE sagt mir, dass besonders die .addBack () -Schlange langsam ist. Es scheint eine Art Sortieren zu geben, was für meinen Anwendungsfall völlig unnötig ist. Könnte ich das loswerden? Gibt es eine andere Möglichkeit, das ausgewählte Element neben addBack () einzufügen?
IE Javascript Profiler: Ausführungszeit für eine Sammlung von etwa 60000 Elementen. Die Inklusivzeiten sind in der dritten Spalte
Oder gibt es eine andere, effizientere Möglichkeit, Klassen aus einem großen Satz von Elementen zu entfernen, indem Sie ein Element, sich selbst und alle untergeordneten Elemente auswählen?
Hinweis: Warum mache ich das: Ich benutze die DevXpress TreeList Component, die mit einem eigenen Styling kommt. Es gibt keinen einfachen Weg, um es auf der Server-Seite zu "stylinken", also wählte ich diese Client-Seite, wie oben gezeigt. Am Ende wähle ich die TreeList, alle Kindelemente und entferne die relevanten CSS-Klassen von ihnen.
Aktualisierung / Lösung 1
Ich habe die von Frédéric Hamidi vorgeschlagene Lösung erfolgreich umgesetzt und habe eine deutliche Verbesserung erfahren:
IE Javascript Profiler: Ausführungszeit für eine Sammlung von etwa 60000 Elementen, unter Verwendung des Vorschlags von Frederic. Die Inklusivzeiten sind in der dritten Spalte
Die Zeit, die für die Operation addBack () benötigt wird, ist einfach weg und bleibt nur die anderen Sachen. Dies bedeutet insgesamt eine Verbesserung um mehr als den Faktor 4. Yay!
Aktualisieren / Lösung 2
Ich habe auch die von A. Wolff vorgeschlagene Lösung implementiert und eine kleine zusätzliche Verbesserung erhalten:
IE javascript profiler: Ausführungszeit für eine Sammlung von ca. 60000 Elementen unter Verwendung des Vorschlags von A. Wolff. Die Inklusivzeiten sind in der dritten Spalte
Die Zeit, die für die Operation find () benötigt wird, ist weg und es bleiben nur die anderen Dinge. Dies bedeutet eine leichte Verbesserung von einigen 10 Millisekunden auf meiner Maschine. Cool!
Dies ist die Lösung, die ich jetzt verwende:
%Vor%3 Antworten
addBack () führt eine Sortierung durch, um die übereinstimmenden Elemente in die Reihenfolge der Dokumente einzufügen. Die einfache Alternative, add () , macht genau dasselbe, also wird es dein Problem nicht lösen.
Die Dokumentation ist jedoch hilfreich genug, um eine Lösung zu bieten:
Um ein jQuery-Objekt mit Elementen in einer genau definierten Reihenfolge zu erstellen und ohne den Overhead zu sortieren, verwenden Sie die
$(array_of_DOM_elements)Signatur.
Um diesen Overhead zu vermeiden, können Sie daher Folgendes schreiben:
%Vor%get () und concat () baut jedoch zwei Arrays unter der Haube auf, so dass die Leistung darunter leidet. Das Endergebnis ist möglicherweise schneller als Ihr aktueller Ansatz, abhängig von der Anzahl der übereinstimmenden Elemente.
Tags und Links javascript jquery css performance