Caching $(this) in jQuery (v3)

Revision 3 of this benchmark created by vzwick on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

<div class="foo">
  <div class="foobar">
    <a href="http://google.de">To Google!</a>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery uncached
$('div.foo').each(function() {
  $(this).find('a').addClass('google');
  $(this).find('div').toggleClass('foobar');
  $(this).find('div a.google').addClass('baz');
});
ready
jQuery cached
$('div.foo').each(function() {
  $this = $(this);
  $this.find('a').addClass('google');
  $this.find('div').toggleClass('foobar');
  $this.find('div a.google').addClass('baz');
});
ready
For uncached
var elements = document.getElementsByClassName('foo');

for (var i = 0; i < elements.length; i++) {
  $(elements[i]).find('a').addClass('google');
  $(elements[i]).find('div').toggleClass('foobar');
  $(elements[i]).find('div a.google').addClass('baz');
}
ready
For cached
var elements = document.getElementsByClassName('foo');

for (var i = 0; i < elements.length; i++) {
  var ele = $(elements[i])
  ele.find('a').addClass('google');
  ele.find('div').toggleClass('foobar');
  ele.find('div a.google').addClass('baz');
}
ready
For properly cached
var elements = document.getElementsByClassName('foo');
ell = elements.length;

for (var i = 0; i < ell; i++) {
  var ele = $(elements[i])
  ele.find('a').addClass('google');
  ele.find('div').toggleClass('foobar');
  ele.find('div a.google').addClass('baz');
}
ready

Revisions

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