jQuery .end() vs cached selector (v6)

Revision 6 of this benchmark created by Philzen on

Preparation HTML

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

<ul class="first">
  <li>list item<span class="number">1</span></li>
</ul>
<ul class="second">
  <li class="foo1">list item 1</li>
  <li class="foo2">list item 2</li>
  <li class="bar1">list item 3</li>
  <li class="bar2">list item 4</li>
  <li class="baz1">list item 5</li>
  <li class="baz2">list item 6</li>
  <li class="bzz1">list item 7</li>
  <li class="bzz2">list item 8</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
$.end() - 8 operations
 $('.second')
.find('.foo1').css('background-color','#000').end()
.find('.foo2').css('background-color','#222').end()
.find('.bar1').css('background-color','#444').end()
.find('.bar2').css('background-color','#666').end()
.find('.baz1').css('background-color','#888').end()
.find('.baz2').css('background-color','#aaa').end()
.find('.bzz1').css('background-color','#ccc').end()
.find('.bzz2').css('background-color','#eee');
ready
var - 8 operations
var $second = $('.second');
$second.find('.foo1').css('background-color','#000');
$second.find('.foo2').css('background-color','#222');
$second.find('.bar1').css('background-color','#444');
$second.find('.bar2').css('background-color','#666');
$second.find('.baz1').css('background-color','#888');
$second.find('.baz2').css('background-color','#aaa');
$second.find('.bzz1').css('background-color','#ccc');
$second.find('.bzz2').css('background-color','#fff');
ready
$.end() - 4 operations
 $('.second')
.find('.foo1').css('background-color','#000').end()
.find('.foo2').css('background-color','#222').end()
.find('.bar1').css('background-color','#444').end()
.find('.bar2').css('background-color','#666').end();
ready
var - 4 operations
var $second = $('.second');
$second.find('.foo1').css('background-color','#000');
$second.find('.foo2').css('background-color','#222');
$second.find('.bar1').css('background-color','#444');
$second.find('.bar2').css('background-color','#666');
ready
$.end() - 2 Iterations
 $('.second')
.find('.foo1').css('background-color','#000').end()
.find('.foo2').css('background-color','#222').end();
ready
var - 2 operations
var $second = $('.second');
$second.find('.foo1').css('background-color','#000');
$second.find('.foo2').css('background-color','#222');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.