Is it faster to traverse the DOM from a cached selector than to find an ID'd element in the DOM?

Question

There are a lot of questions about whether or not finding an element is faster via class or id or some other selector. I'm not interested in that. I want to know if you have:

var link = $(this); //let's say you're in a click handler

Is it faster to find the container by doing

var container = link.closest('.container'); //assume container is .container

or

var container = $('#mycontainer'); //assume same element as above

I'm asking this question not just for the particular scenario above (ok, well, yes, for this scenario too) but for cached traversal vs. creating a fresh jQuery object that has an ID. I notice in a lot of my code I tend to do the former method (since it can lend itself to being more dynamic), but I was always curious if it was faster to do it the latter way.

Thanks

Answer 1

I would think that, cached selector or not, it would be faster to use the id selector. The ID selector is pretty much a direct dictionary lookup vs the cached/closest combination which is like a dictionary lookup, followed by a tree traversal.

http://jsperf.com/traverse-from-cached-selector-vs-id-selector

The fastest lookup would be done with the native documentGetElementById function.

var container = $(document.getElementById('MyContainer'));