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.

No comments:

Post a Comment