{"id":170,"date":"2013-09-16T11:00:33","date_gmt":"2013-09-16T11:00:33","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=170"},"modified":"2022-08-16T23:04:52","modified_gmt":"2022-08-16T23:04:52","slug":"15-tips-to-improve-your-jquery-selectors","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2013\/09\/16\/15-tips-to-improve-your-jquery-selectors\/","title":{"rendered":"15 Tips to Improve Your jQuery Selectors"},"content":{"rendered":"

Who don’t know what jQuery<\/a> is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k<\/a> websites. We use it constantly and sometimes we tend to think it’s almost magic, that jQuery is capable to understand what we want to achieve and optimize all for us. There is no need to say this is wrong. You need to be aware of what jQuery does and does not for you and optimize as much as you can to improve your website’s performance.<\/p>\n

In this article, extracted from my book Instant jQuery Selectors<\/a>, you’ll learn some useful tips and tricks to improve the performance of your website by simply selecting elements in the right way.
\n
\nPlease note that, to be a complete post, it has some minor adjustments compared to the original recipe titled How to have efficient selectors (Become an expert)<\/cite>.<\/p>\n

\"jquery<\/p>\n

\n\"Instant<\/a>
\nThis article is extracted from my book Instant jQuery Selectors<\/a>. Consider buying it on the Packt Publishing website<\/a> or on Amazon<\/a>.<\/p>\n

Instant jQuery Selectors<\/cite> is a practical guide that will teach you how to use jQuery’s selectors efficiently in order to easily select the elements of your pages to operate upon with jQuery’s methods. You will go through the most common problems that you could face while developing your project and will learn how to solve them with the help of focused examples that Instant jQuery Selectors<\/cite> has to offer.\n<\/div>\n

How to do it…<\/h2>\n

To boost the performances, keep in mind the following points.<\/p>\n

1. Avoid the Universal Selector<\/h3>\n

Don’t use the Universal selector (explicitly or implicitly). Never! Seriously!<\/p>\n

2. Rely on Native Functions<\/h3>\n

The best selectors are the Id, Class and Element selectors, because under the hood jQuery uses native JavaScript functions.<\/p>\n

3. Id selector is the Best<\/h3>\n

The best performances are achieved using the ID selector.<\/p>\n

4. Don’t Overqualify the Id Selector<\/h3>\n

Never prepend a tag name before an id, it’ll slow down the selector. For example, don’t<\/em> turn<\/p>\n

$('#content')<\/pre>\n
into<\/p>\n
$('div#content')<\/pre>\n
jQuery starts parsing the selector using a regular expression. If it discloses that the selectors is an id, because it starts with a sharp (#<\/code>), behind the scenes jQuery will use the JavaScript native getElementById()<\/code> method, that is very fast.<\/p>\n
5. Start with the Id Selector when Possible<\/h3>\n
If your selection needs more than one selector, start with the Id selector if possible. For example:<\/p>\n
$('#content p.border')<\/pre>\n
6. Don’t Forget to Use the context<\/em> Parameter<\/h3>\n
Remember to use the context<\/code> parameter or the find()<\/code> method when possible. For example, turn<\/p>\n
$('#content p.border')<\/pre>\n
into<\/p>\n
$('p.border', '#content')<\/pre>\n
or even better into<\/p>\n
$('#content').find('p.border')<\/pre>\n
The reason is that the jQuery constructor will do nothing but convert $('p.border', '#content')<\/code> into $('#content').find('p.border')<\/code>. If you look at the source code, you’ll find these lines:<\/p>\n
\r\n\/\/ HANDLE: $(expr, context) \r\n\/\/ (which is just equivalent to: $(context).find(expr) \r\n} else { \r\n   return this.constructor( context ).find( selector );\r\n}\r\n<\/pre>\n
7. Be More Specific on the Right Side<\/h3>\n
jQuery’s selectors engine, called Sizzle<\/a>, parses selectors from right to left. Therefore, to speed up your selection, be more specific on the right part and less on the left. For example, turn<\/p>\n
$('div.wrapper .border')<\/pre>\n
into<\/p>\n
$('.wrapper p.border')<\/pre>\n
8. Don’t be too Specific<\/h3>\n
Don’t be too specific if the same set can be selected with less selectors. For example:<\/p>\n
$('#content p.border')<\/pre>\n
is better than<\/p>\n
$('#content div.wrapper div p.border')<\/pre>\n
9. Don’t be too Generic when Using Filters<\/h3>\n
If you need to use a filter, it’s always better to narrow down the set of elements and then use the filter. For example, turn<\/p>\n
$(':enabled')<\/pre>\n
into<\/p>\n
$('#formId').find(':enabled')<\/pre>\n
or even better<\/p>\n
$('#formId').find('input:enabled')<\/pre>\n
10. Use filter()<\/em> instead of jQuery’s Selectors Extension<\/h3>\n
Filters such as, :button<\/code>, :checkbox<\/code>, :visible<\/code>, :input<\/code>, and others are a jQuery extension and not part of the CSS specification, so they can’t take advantage of the performance provided by querySelectorAll()<\/code>. To have better performance, it’s better to first select elements using a pure CSS selector and then filter using filter()<\/code> (that is, .filter(':input')<\/code>).<\/p>\n
11. Use the Attribute Selector instead of jQuery’s Selectors Extension<\/h3>\n
Filters such as, :image<\/code>, :text<\/code>, :password<\/code>, :reset<\/code> and others are a jQuery extension and not part of the CSS specification, so they can’t take advantage of the performance provided by querySelectorAll()<\/code>. To have better performance, it’s better to select using the attribute selector. For example, turn<\/p>\n
$(':reset')<\/pre>\n
into<\/p>\n
$('[type=reset]')<\/pre>\n
12. Be Careful of Not Equal Attribute Selector<\/h3>\n
To improve the performance of the Not Equal attribute selector in browsers that support querySelectorAll()<\/code>, use the not()<\/code> method. For example, turn<\/p>\n
$('.border [placeholder!=Age]')<\/pre>\n
into<\/p>\n
$('.border').not('[placeholder=Age]')<\/pre>\n
13. Be Careful of the :lt()<\/em> Filter<\/h3>\n
To improve the performance of :lt()<\/code> filter in modern browsers, use the slice()<\/code> method. For example, turn<\/p>\n
$('.border:lt(2)')<\/pre>\n
into<\/p>\n
$('.border').slice(0, 3)<\/pre>\n
14. Be Careful of the :gt()<\/em> Filter<\/h3>\n
To improve the performance of the :gt()<\/code> filter in modern browsers, use the slice()<\/code> method. For example, turn<\/p>\n
$('.border:gt(2)')<\/pre>\n
into<\/p>\n
$('.border').slice(3)<\/pre>\n
15. Be Careful of the :has()<\/em> Filter<\/h3>\n
To improve the performance of the :has()<\/code> filter in modern browsers, use the has()<\/code> method. For example, turn<\/p>\n
$('div:has(p.border)')<\/pre>\n
into<\/p>\n
$('div').has('p.border')<\/pre>\n
Conclusions<\/h2>\n
In this article I explained how you can improve the performance of your web pages simply paying attention to how you select elements using jQuery. Keep in mind that these tips aren’t magic, so just applying them your page that currently loads in 10 seconds won’t turn into one that loads in 2 seconds. However, if your operations on the elements you retrieve are complex enough, just tweaking your selectors you can see some performance improvements.<\/p>\n
\n\"Instant<\/a>
\nIf you liked this article, consider buying my book Instant jQuery Selectors<\/a> on the Packt Publishing website<\/a> or on Amazon<\/a>.<\/p>\n
Instant jQuery Selectors<\/cite> is for web developers who want to delve into jQuery from its very starting point: selectors. Even if you’re already familiar with the framework and its selectors, you could find several tips and tricks that you aren’t aware of, especially about performance and how jQuery acts behind the scenes.\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Who don’t know what jQuery<\/a> is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k<\/a> websites. We use it constantly and sometimes we tend to think it’s almost magic, that jQuery is capable to understand what we want to achieve and optimize all for us. There is no need to say this is wrong. You need to be aware of what jQuery does and does not for you and optimize as much as you can to improve your website’s performance.<\/p>\n
In this article, extracted from my book Instant jQuery Selectors<\/a>, you’ll learn some useful tips and tricks to improve the performance of your website by simply selecting elements in the right way.<\/p>\n","protected":false},"author":1,"featured_media":153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[22,46,8,20,23,11],"class_list":["post-170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-book","tag-javascript","tag-jquery","tag-jquery-selectors","tag-performance","tag-web"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jQuery-logo.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-2K","jetpack-related-posts":[{"id":140,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/03\/instant-jquery-selectors-my-first-book-is-out\/","url_meta":{"origin":170,"position":0},"title":"Instant jQuery Selectors: My first book is out!","author":"Aurelio De Rosa","date":"September 3, 2013","format":false,"excerpt":"Today I'm really pleased to announce that few days ago my first book, titled Instant jQuery Selectors, was published by the Packt Publishing. Publishing a book has always been one of my goals since I started my developer career, and now that I realized it I can't explain how I'm\u2026","rel":"","context":"In "News"","block_context":{"text":"News","link":"https:\/\/www.audero.it\/blog\/category\/news\/"},"img":{"alt_text":"Instant jQuery selectors cover","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/10\/instant-jquery-selectors-cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":148,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/05\/how-to-create-custom-filters-in-jquery\/","url_meta":{"origin":170,"position":1},"title":"How to Create Custom Filters in jQuery","author":"Aurelio De Rosa","date":"September 5, 2013","format":false,"excerpt":"In some cases you may need a shortcut to collect elements for which jQuery doesn't provide a specific filter. This is exactly where custom filters come into play. In this article, extracted from my book Instant jQuery Selectors, you'll learn how to build a custom filter in jQuery. Please note\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":203,"url":"https:\/\/www.audero.it\/blog\/2013\/10\/15\/codemotion-madrid-2013-giveaway-win-a-free-copy-of-instant-jquery-selectors\/","url_meta":{"origin":170,"position":2},"title":"Codemotion Madrid 2013 Giveaway: Win a Free Copy of Instant jQuery Selectors","author":"Aurelio De Rosa","date":"October 15, 2013","format":false,"excerpt":"As some of you may be already aware, on Saturday October 19th 2013 I'll speak at Codemotion Madrid with a talk titled People don't give a f**k of JavaScript. If you didn't know it, it's because you don't follow me on Twitter and you're a bad guy or girl. Anyway,\u2026","rel":"","context":"In "General"","block_context":{"text":"General","link":"https:\/\/www.audero.it\/blog\/category\/general\/"},"img":{"alt_text":"Instant jQuery selectors cover","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/10\/instant-jquery-selectors-cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":329,"url":"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/","url_meta":{"origin":170,"position":3},"title":"Resources for Beginner Front-end Developers","author":"Aurelio De Rosa","date":"September 19, 2014","format":false,"excerpt":"Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it'd have been nice to share the same suggestions on my blog. That's exactly what you'll find in this\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"html5 css3 javascript logos","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":599,"url":"https:\/\/www.audero.it\/blog\/2016\/10\/03\/5-reasons-start-writing-technical-articles\/","url_meta":{"origin":170,"position":4},"title":"5 reasons why you should start writing technical articles","author":"Aurelio De Rosa","date":"October 3, 2016","format":false,"excerpt":"A few weeks ago, LinkedIn has reminded me that it was four years ago (on the 8th of September 2012) when my first technical article, titled Create Your Own HTML5 Environmental Thermometer, went live. The article was published by SitePoint at a time where the editor was Tom Museth (still\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/10\/knowledge.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/10\/knowledge.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/10\/knowledge.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/10\/knowledge.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/10\/knowledge.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":217,"url":"https:\/\/www.audero.it\/blog\/2013\/11\/05\/my-experience-at-codemotion-madrid-2013\/","url_meta":{"origin":170,"position":5},"title":"My Experience at Codemotion Madrid 2013","author":"Aurelio De Rosa","date":"November 5, 2013","format":false,"excerpt":"As I announced in September, on the 19th October 2013 I spoke at Codemotion Madrid 2013 presenting a talk titled People don't give a f**k of JavaScript, where I showed some new HTML5 APIs. This article is a wrap up of my experience at the event, both as a speaker\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"Friends of Codemotion Madrid 2013","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/11\/friends-of-codemotion-madrid-2013-300x225.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":35,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":951,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions\/951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}