Selector Engines: Right to Left

One lessor known fact about CSS selectors, querySelectorAll, and JavaScript-based selector engines is that they read your selectors from right to left.  This news hit me as illogical at first, as you'd think that the first element in a selector string like "#myElement a.something .else" would provide a base context, but no:  the ".else" is search for first.  After more thought, searching for the right-most selector piece makes sense, as you instead collect the ".else" elements first (instead of, theoretically, all the elements under "#myElement", then "a.something" elements, and so on) and then look up the chain for matches.  Essentially, you grab all the potential matches and then confirm by walking up the DOM tree, instead of grabbing the parent and look for matches on the way down.

I was recently looking at popular development site and found the following snippet:

jQuery("#subscribe-main li:nth-child(4)")....

This snippet found the desired elements in 1ms according to FireBug's console.  A millisecond is lightning fast, but if you slightly change the selector code, you get a faster result:

jQuery("li:nth-child(4)", "#subscribe-main");

// Could use this as well
// jQuery("#subscribe-main").find("li:nth-child(4)")....

The selection code above returns the same elements in 0ms.  A millisecond difference is negligible in one instance, but in a large application, these milliseconds will add up!

This post simply acts a a reminder that selector composition is important.  Here's a task for you:  go to the sites you've written the JavaScript selectors for and compare your selectors like I have above.  If you aren't familiar with basic selector time testing via the console, here's how you do it:

console.time("someKey");
jQuery("#mySelector .more .stuff")...
console.timeEnd("someKey");

The console doesn't do better than millisecond precision, but a different result at that precision gets you started in selector enhancement.  Happy selector revising!