Search jQuery

jQuery Forum

jquery selector performance

in Using jQuery • 10 years ago

What kind of rules do you follow for selecting elements with jQuery on web pages? For example, do you always try to qualify your element selection as much as possible?

For example, if I had an xhtml table - tblCustomers - with a hidden field in the footer - hdnEditId - then this would be the most qualified way to select the element:

$('#tblCustomers tfoot th input:hidden[id=hdnEditId]')

If you're developing a small part of a web page that grows and becomes huge I can see how this approach could make a visible difference in performance.

Can anyone here quantify the performance metrics based on the level to which you qualify an element selection query in jQuery?

Replies(5)

Kevin B

Re: jquery selector performance

10 years ago

Since the element you are selecting contains an ID, and ID's must be unique, the most efficient selector would be to select directly by that id.

$("#hdnEditId");

-- Kevin

Kevin B

Re: jquery selector performance

10 years ago

Another general thing to look out for is class selectors.

Selecting by class vs tagname and class varies between browsers as far as which one is quicker.

$("div.foobar");

$(".foobar");

I usually lean toward the $("div.foobar")

Also, when using selectors such as :hidden, it can sometimes be faster to split that into a .filter:

$('input').filter(':hidden');

This is because some browsers (most modern browsers) support the querySelectorAll() method, but not all of them support the :hidden pseudo selector. By splitting it up, you get the quick selection by queryselectorAll() for "input", then filter that by the less efficient :hidden selector.

-- Kevin

jquery_gu..