Leistung von Jquery sichtbar

Question

Ich habe eine Reihe von Kontrollkästchen auf einer Seite, und ich zeige nur eine Teilmenge dieser Kontrollkästchen gleichzeitig.

ich dann eine Aktion durchführen, die durch alle Kontrollkästchen Schleifen und sieht, wenn sie aktiviert sind oder nicht:

z.B.

$(".delete_items").click(function() { 
    $('.checkboxes').each(function(){ 
    //do stuff 
    } 
} 

Dann dachte ich, na ja, da der Benutzer nie mit den versteckten Kontrollkästchen, dass das Hinzufügen von in Wechselwirkung treten kann: Sichtbar für Kontrollkästchen beschleunigen würde die Schleife

z.B.

$(".delete_items").click(function() { 
    $('.checkboxes :visible').each(function(){ 
    //do stuff 
    } 
} 

Aber ich weiß nicht, ob Hinzufügen: sichtbar fügt mehr Aufwand. Irgendwelche Gedanken?

Answer 1

:visible wird sicher mehr Aufwand hinzufügen, wie jQuery mehrere Eigenschaften zu prüfen hat, ob ein Element sichtbar ist oder nicht:

Elemente können aus mehreren Gründen versteckt werden in Betracht gezogen:

• Sie haben ein CSS-Anzeigewert von keiner.
• Sie sind Formularelemente mit type = "versteckt".
• Ihre Breite und Höhe sind explizit auf 0 gesetzt.
• Ein Vorfahrelement ist ausgeblendet, so dass das Element nicht auf der Seite angezeigt wird.

Quelle - :hidden Selector | jQuery API Documentation

Vor allem der letzte Punkt scheint das DOM oben für jedes Element zu implizieren, durchqueren, die Overhead hinzufügt. Wenn Sie die Klasse nur als Selektor verwenden, kann jQuery Browserfunktionen wie getElementsByClass oder querySelectorAll verwenden.

Auf der anderen Seite, wenn Sie komplexe komplexe Aktionen auf diesen Kontrollkästchen ausführen, könnte Schleifen von weniger als die vorherige Suche überwiegen.

Sie müssen es definitiv selbst benchmarken.

Update:

Eine weitere Idee eine andere Klasse zu den sichtbaren Kontrollkästchen zuweisen und wählen Sie diese mit

$('.checkboxes.otherClass') 

, die auf jeden Fall schneller sein sollte als :visible verwenden.

Update 2:

habe ich eine jsPerf: http://jsperf.com/jquery-visible-test

Es ist vielleicht nicht der beste Testfall sein, aber zumindest für mich (Chrome 8, Mac OS X 10.6), mit :visible ist ~ 45% langsamer (noch schlimmer in Firefox 3.6.13: ~ 75% langsamer).

Update 3:

zwei Klassen scheint noch schneller zu werden, habe ich den Testfall aktualisiert.

Answer 2

Nun, würden Sie

$('.checkboxes:visible') 

(bemerkt das Fehlen eines Raumes) hinzuzufügen, da es Ihnen nur um die sichtbaren Kontrollkästchen und nicht sichtbare Element sind, die ein Nachkomme einer Checkbox ist. Sobald Sie das behoben haben, sollte no ... das Hinzufügen eines sichtbaren Selektors keinen merklichen Overhead hinzufügen.

Mit dem gesagt, ich denke, wenn Sie nicht viele Checkboxen auf Ihrer Seite haben, sind Sie Mikro-Optimierung. Wenn Sie nicht wirklich einen Leistungseinbruch bemerken, machen Sie sich keine Sorgen darüber, ob Sie sichtbar oder nicht sichtbar sind (ich denke, es ist besser, den Zustand zu diesem Zeitpunkt konsistent und vorhersehbar zu halten) und Ihren Code ordnungsgemäß zu nutzen.

Answer 3

Ich bin mir nicht ganz sicher, ob die unsichtbaren Checkboxen wichtig sind. Wenn es Ihnen nichts ausmacht, sie einzuschließen, benutzen Sie einfach den Klassenselektor und lassen Sie querySelectorAll das schwere Heben machen, wie Felix King vorschlägt.

Auf der anderen Seite, wenn Sie darauf achten, dass Sie nur an den sichtbaren Kontrollkästchen arbeiten, können Sie ihre Sichtbarkeit bestimmen, wenn sie aktiviert sind. Dies wird erheblich schneller, da Sie die Sichtbarkeitselemente, die nicht überprüft werden, nicht überprüfen müssen. Sie können auch ein wenig betrügen und verwenden eine interne jQuery Funktion jQuery.expr.filters.visible, die eine viel schnellere Weg ist $(this).is(':visible') der Aufruf:

$('.checkboxes').each(function(){ 
    if (this.checked && jQuery.expr.filters.visible(this)) { 
     // checkbox is visible and checked 
    } 
} 

Beachten Sie, dass, während dies in jQuery 1.4.4 funktioniert, ist es nicht dokumentiert ist und könnte sich ändern an jedem Punkt ...

Wie andere Benutzer bereits erwähnt haben, sollten Sie nicht überoptimieren, es sei denn, es treten erhebliche Leistungsprobleme auf. Diese Lösung kann nützlich sein, wenn Sie es sind.

bearbeiten Ein wenig benchmarking schlägt vor, dass, sollten Sie Ihre Anforderung nur auf checked, sichtbar Kontrollkästchen zu arbeiten sein, ist meine Lösung, die etwa doppelt so schnell wie $('.checkboxes:visible'), Sie haben keine relevante Klasse angewandt bekommen vorausgesetzt.