Showing posts with label jQuery speed test child selector. Show all posts
Showing posts with label jQuery speed test child selector. Show all posts

Friday, October 7, 2011

jQuery speed test - child selector

Selecting child elements with jQuery is not a challange. However selecting it the fastest way is. I did a simple jQuery selector speed test with the latest versions of Firefox, Chrome, Opera and Internet Exporer. The values you see here are in milliseconds per 1000 cycle.

Here is what I got:


Based on the previous chart it seems... well, quite obvious that IE is the slowest and Chrome is the fastest... but returning to the topic... :)

Here are the comparisons of the fastest ways of getting the children elements (the datas from IE are excluded from the test now due to the large difference):

For all child elements the best way is:
jQuery("li > *"). It's:
  • ~29.4% faster than jQuery("li").children()
  • ~86.1% faster than jQuery("> *", li)
  • ~140% slower than li.children()

And for only link elements the best method is:
jQuery("li > a"). It's:
  • ~65.2% faster than jQuery("li").children("a")
  • ~87.5% faster than jQuery("> a", li)
  • ~47.3% faster than li.children("a")

The other thing to observe is that the loops are much faster if you store the base jQuery wrapper object in a variable.