jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

parent Nodecached vs noncached (v9)

Revision 9 of this benchmark created on October 26, 2014

Description

Speed difference impressive between cached dom reference and no cached access and

Preparation HTML

<div id="parent">
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
<div class="child"></div>
<div class="otherchild"></div>
 <div class="child"></div>
<div class="otherchild"></div>
</div>

Setup

var gchild = document.querySelectorAll('.child');

Test runner

Ready to run.

Test Ops/sec

nocache parentNode

Testing in
Test	Ops/sec
nocache parentNode	for (var i = 0; i < gchild.length; i++) { if (!gchild[i].innerHTML) { gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'red'; gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'blue'; gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'orange'; gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'yellow'; } else { gchild[i].parentNode.style.color = 'red'; gchild[i].parentNode.style.width = '300'; } }	ready
dom cached	`var domcached; var i; for (i = 0; i < gchild.length; i++) { domcached = gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling; if (!gchild[i].innerHTML) { domcached.style.color = 'red'; domcached.style.color = 'blue'; domcached.style.color = 'orange'; domcached.style.color = 'yellow'; } else { domcached.style.color = 'red'; domcached.style.width = '300'; } }`	ready

for (var i = 0; i < gchild.length; i++) {
  if (!gchild[i].innerHTML) {
    gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'red';
    gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'blue';

    gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'orange';

    gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling.style.color = 'yellow';




  } else {
    gchild[i].parentNode.style.color = 'red';
    gchild[i].parentNode.style.width = '300';
  }

}

ready

dom cached

var domcached;

var i;
for (i = 0; i < gchild.length; i++) {
  domcached = gchild[i].nextElementSibling.previousElementSibling.nextElementSibling.previousElementSibling;

  if (!gchild[i].innerHTML) {
    domcached.style.color = 'red';
    domcached.style.color = 'blue';
    domcached.style.color = 'orange';
    domcached.style.color = 'yellow';




  } else {
    domcached.style.color = 'red';
    domcached.style.width = '300';
  }

}

ready

Revisions

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

Revision 1: published by Brian Egan on July 19, 2012
Revision 2: published on February 14, 2013
Revision 4: published on May 16, 2013
Revision 5: published on August 23, 2013
Revision 6: published on January 14, 2014
Revision 7: published on January 14, 2014
Revision 9: published on October 26, 2014