Performance of jquery visible

I have a bunch of checkboxes on a page, and I only show a subset of those checkboxes at a time.

I then perform some action which loops through all of the checkboxes and sees if they are checked or not:

e.g.

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

Then I was thinking, well since the user can never interact with the hidden checkboxes, that adding :visible to checkboxes would speed up the loop

e.g.

$(".d开发者_如何学运维elete_items").click( function() {
     $('.checkboxes :visible' ).each(function(){
     //do stuff
     }
}

But I don't know if adding :visible adds more overhead. Any thoughts?

---

:visible will add for sure more overhead, as jQuery has to check several properties whether an element is visible or not:

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Source — :hidden Selector | jQuery API Documentation

Especially the last point seems to imply traversing the DOM up for every element which adds overhead.

If you just use the class as selector, jQuery can make use of browser functions like getElementsByClass or querySelectorAll.

On the other side, if you perform computational complex actions on these checkboxes, looping over fewer of them might outweigh the previous lookup.

You definitely have to benchmark it yourself.

Update:

Another idea to assign another class to the visible checkboxes and select them with

$('.checkboxes.otherClass')

that should definitely be faster than using :visible.

Update 2:

I created a jsPerf: http://jsperf.com/jquery-visible-test

It might not be the best test case but, at least for me (Chrome 8, Mac OS X 10.6), using :visible is ~45% slower (even worse in Firefox 3.6.13: ~75% slower).

Update 3:

Using two classes seems to be even faster, I updated the test case.

---

I'm not quite sure whether the invisible checkboxes are important. If you don't mind including them, just use the class selector and let querySelectorAll do the heavy lifting, as Felix King suggests.

On the other hand, if you do mind that you only work on the visible checkboxes, you could determine their visibility if they are checked. This will be significantly faster, as you don't need to check the visibility elements that are not checked. You can also cheat a bit and use an internal jQuery function jQuery.expr.filters.visible, which is a much quicker way of calling $(this).is(':visible'):

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

Note that, while this works in jQuery 1.4.4, it is not documented and could change at any point...

As other users have mentioned, don't over-optimise unless you are experiencing significant performance problems. This solution may be of use if you are.

Edit A little benchmarking suggests that, should your requirement be to work only on checked, visible checkboxes, my solution is approximately twice as fast as $('.checkboxes:visible'), presuming you haven't got a relevant class applied.

---

Well, you would want to add

$('.checkboxes:visible') 

(notice the lack of a space) since you are only concerned about the visible checkboxes and not any visible item that is a descendant of a checkbox. Once you fix that, then, no...adding a visible selector should not add any noticeable overhead.

With that said, I think, unless you have a lot of checkboxes on your page, you are micro-optimizing. Unless you are really noticing a performance hit, don't worry about doing visible or non-visible (I think it is better to keep state consistent and predictable at this point) and get your code working properly.