Is document.links faster in finding a link using jQuery?

Question

Is this faster:

$(document.links).filter('a.someClass')

than just plain old this:

$('a.someClass')

?

I don't see anywhere in jQuery's code the utilization of document.links
which gives you the collection of links on the document right away,
than, it would seem, it would be faster to just filter in the collection
instead of all the DOM nodes, which is alot more nodes to go over.

Answer 1

Don't second-guess jQuery. Lots of people have spent lots of time making it fast. If it were the case that document.links were a good way to find <a> tags, then Sizzle would do it automatically for you.

That said (well, typed), it's definitely better to do this:

$('a.someClass')

than

$('.someClass')

When you can qualify your selectors with a tag name, you're better off. The engine will use getElementsByTagName() to cut down on the number of nodes to scan.

Answer 2

I'm not familiar with how the sizzle selector library works but I would suspect when you do $('a.someclass') that jQuery will retrieve all the anchors using something like document.getElementByTagName('A') rather than traversing the whole DOM.

As Pointy says, sizzle is very fast and highly optimised, best way to find out which is better would be to run your own benchmarks

Answer 3

I just ran a test, running the selector 1000 times on Chrome.

$(document.links).filter('a.someClass') took 672 ms to run 1000 times.

$('a.someClass') took 191 ms to run 1000 times.

If you do

$('a').filter('.someClass') however, that takes 652 ms to run; so filter seems to be where the time is lost.

var x = $('.remove', document.links); coincidentally, took 13 seconds; so best not to use that variation :P

Answer 4

I just ran a test here : http://jsbin.com/ixiva3

1000 links were created dynamically. this test require firebug (using console.time)

Results shows that $("a.somelink") is the fastest.

Answer 5

Theoretically, iterating document.links will be a bit faster than jQuery's Sizzle selector library. However:

• not the way you're doing it with filter, which gives jQuery just as much work to do than it would have to do using Sizzle to pick the elements in the first place;

• document.links won't necessarily give you exactly the same as $('a'), as a-without-href doesn't appear in the links collection.

• the direct $('a.someClass') method will be much faster than even manually iterating document.links in modern browsers, because that method will just transfer control to the browser's own implementation of document.querySelectorAll('a.someClass'), which will be much faster than anything your or Sizzle could do sniffing at DOM Nodes yourself.

(There is one slightly faster method than querySelectorAll, which jQuery doesn't use yet: document.getElementsByClassName('someClass'). Again, it's only in modern browsers though, and IE8 doesn't have it where it does have querySelectorAll. In practice it's probably not worth bothering about too much as querySelectorAll is already very fast.)