jQuery .end() vs cached selector

JavaScript performance comparison

Test case created by Kito

Info

After reading http://www.learningjquery.com./2011/12/using-jquerys-pushstack-for-reusable-dom-traversing-methods I was wondering if this approach gave any advantage over caching selectors.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul class="first">
  <li class="foo">
    list item
    <span class="number">
      1
    </span>
  </li>
  <li>
    list item
    <span class="number">
      2
    </span>
  </li>
  <li class="bar">
    list item
    <span class="number">
      3
    </span>
  </li>
</ul>
<ul class="second">
  <li class="foo">
    list item 1
  </li>
  <li>
    list item 2
  </li>
  <li class="bar">
    list item 3
  </li>
</ul>

Preparation code output

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.end()
$('ul.first').find('.foo').end().find('.bar');
pending…
Cached
var $first = $('ul.first');
$first.find('.foo');
$first.find('.bar');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment