My question is related to DOM parsing getting triggered, i would like to know why it's faster to use a CSS ID selector than a Class selector. When does the DOM tree have to be parsed again, and what tricks and performance enhancements should I use... also, someone told me that if I do something like

var $p = $("p");  
$p.css("color", "blue"); 
$p.text("Text changed!");

instead of

$("p").css("color", "blue");  
$("p").text("Text changed!"); 

improves performance, is this true for all browsers? Also how do I know if my DOM tree has been re-parsed?

My question is related to DOM parsing getting triggered, i would like to know why it's faster to use a CSS ID selector than a Class selector. When does the DOM tree have to be parsed again, and what tricks and performance enhancements should I use... also, someone told me that if I do something like

var $p = $("p");  
$p.css("color", "blue"); 
$p.text("Text changed!");

instead of

$("p").css("color", "blue");  
$("p").text("Text changed!"); 

improves performance, is this true for all browsers? Also how do I know if my DOM tree has been re-parsed?

• javascript
• jquery
• dom
• jquery-selectors

• CSS selector parsing performance alone is microscopic enough. Throwing jQuery's different ways of interpreting different selectors (CSS or non-CSS) into the mix just makes everything unnecessarily confusing. It's not worth agnonizing over these nuances. – BoltClock Commented Apr 17, 2012 at 14:04
• artzstudio./2009/04/jquery-performance-rules lists many rules for jquery perf improvement – rt2800 Commented Apr 17, 2012 at 14:06
• 1 Also note that you can method chain. So you can do $('p').css('').text('').morestuff() to improve performance too – mrtsherman Commented Apr 17, 2012 at 14:07
• yep, my only caveat with chaining is that sometimes you get lost in the chain, also harder to debug, unless there is a trick for doing it differently? I guess i will have to get used to it, it's the jQuery way of doing many things. – Astronaut Commented Apr 17, 2012 at 14:37

3 Answers 3

Well, an #id selector is faster than class selectors because: (a) there can only be one element with a given id value; (b) browsers can hold a map id -> element, so the #id selector can work as quick as a single map lookup.

Next, the first option suggested above is definitely faster, as it avoids the second lookup, thereby reducing the total selector-based lookup time by a factor of 2.

Last, you can use Chrome Developer Tools' Selector Profiler (in the Profiles panel) to profile the time it takes a browser to process selectors in your page (match + apply styles to the matching elements.)

An ID selector is faster than a class selector because there is only one element with an ID but many elements could share a class and they have to be searched.

The code below is needlessly parsing the DOM twice, so of course it will be slower:

$("p").css("color", "blue");  
$("p").text("Text changed!"); 

I encourage you to make your own performance tests whenever you have a doubt. You can get more info on how to do that here: How do you performance test JavaScript code?. Once you've tested performance on your own, you'll never forget the results.

In particular, the execution of the $() function on a given jquery selector must obtain the matching DOM nodes. I'm not sure exactly how this works but I'm guessing it is a bination of document.getElementById(), document.getElementsByTagName() and others. This has a processing cost, no matter how small it may be, if you call it only once and then reuse it you save some processing time.