jQuery selector performance

Question

I have the following two code blocks.

Code block 1

var checkboxes = $("div.c1 > input:checkbox.c2", "#main");
var totalCheckboxes = checkboxes.length;
var checkedCheckboxes = checkboxes.filter(":checked").length;

Code block 2

var totalCheckBoxes = $("div.c1 > input:checkbox.c2", "#main").length;
var checkedCheckBoxes = $("div.c1 > input:checkbox.c2:checked", "#main").length;

Which one of the above will be faster?

Thanks,

Rahul

Answer 1

Number 1 will be slightly faster as the filter is applied to an object containing the selected elements already. Number 2 basically performs the same selector query twice, the second time including the :checked selector epxression.

In reality, the speed difference between the two is not going to be a showstopper :)

I'd be inclined to use

var checkboxes = $("#main").find("div.c1 > input:checkbox.c2");
var totalCheckboxes = checkboxes.length;
var checkedCheckboxes = checkboxes.filter(":checked").length;

Supplying the context will make essentially resolve to the above, but using .find() has been shown to be faster (I'll dig out the reference, I believe it was on John Resig's blog).

Answer 2

Maybe write a small test and benchmark it using different browsers.

Answer 3

If you want performance, don't be that specific if you can avoid it.

For instance, if you can afford just to lookup class 'c2' it should improve the selecter speed.

$("#main").find(".c2")

should be the fastest solution.

Kind Regards

--Andy