Accordion Selection

JavaScript performance comparison

Test case created by Will Mitchell

Preparation code

<section class="accordion">
  <section>
    <h1>Yesterday</h1>
    <p>I was sick yesterday, so not much happened.</p>
  </section>
  <section>
    <h1>Today</h1>
    <p>I have a bunch of things to do today:</p>
    <ul>
      <li>Grocery shopping</li>
      <li>Stop at the bank</li>
      <li>Dinner and a movie</li>
    </ul>
  </section>
  <section>
    <h1>Road Blocks</h1>
    <p>I'm sick!<p>
  </section>
</section>


<section class="accordion">
  <section>
    <h1>Yesterday</h1>
    <p>I was sick yesterday, so not much happened.</p>
  </section>
  <section>
    <h1>Today</h1>
    <p>I have a bunch of things to do today:</p>
    <ul>
      <li>Grocery shopping</li>
      <li>Stop at the bank</li>
      <li>Dinner and a movie</li>
    </ul>
  </section>
  <section>
    <h1>Road Blocks</h1>
    <p>I'm sick!<p>
  </section>
</section>


<section class="accordion">
  <section>
    <h1>Yesterday</h1>
    <p>I was sick yesterday, so not much happened.</p>
  </section>
  <section>
    <h1>Today</h1>
    <p>I have a bunch of things to do today:</p>
    <ul>
      <li>Grocery shopping</li>
      <li>Stop at the bank</li>
      <li>Dinner and a movie</li>
    </ul>
  </section>
  <section>
    <h1>Road Blocks</h1>
    <p>I'm sick!<p>
  </section>
</section>


<section class="accordion">
  <section>
    <h1>Yesterday</h1>
    <p>I was sick yesterday, so not much happened.</p>
  </section>
  <section>
    <h1>Today</h1>
    <p>I have a bunch of things to do today:</p>
    <ul>
      <li>Grocery shopping</li>
      <li>Stop at the bank</li>
      <li>Dinner and a movie</li>
    </ul>
  </section>
  <section>
    <h1>Road Blocks</h1>
    <section class="accordion">
  <section>
    <h1>Yesterday</h1>
    <p>I was sick yesterday, so not much happened.</p>
  </section>
  <section>
    <h1>Today</h1>
    <p>I have a bunch of things to do today:</p>
    <ul>
      <li>Grocery shopping</li>
      <li>Stop at the bank</li>
      <li>Dinner and a movie</li>
    </ul>
  </section>
  <section>
    <h1>Road Blocks</h1>
    <p>I'm sick!<p>
  </section>
</section>

    <p>I'm sick!<p>
  </section>
</section>

      
<script>
Benchmark.prototype.setup = function() {
  var a = document.querySelectorAll('.accordion');
  for (var i = 0; i < a.length; i++) {
    a[i].classList.remove('js');
    a[i].innerHTML = a[i].innerHTML;
  }
  
  a = document.querySelectorAll('.accordion.js');
  for (i = 0; i < a.length; i++) {
    a[i].classList.remove('js');
    a[i].innerHTML = a[i].innerHTML;
  }

};
</script>

Preparation code output

<section class="accordion"> <section> <h1>Yesterday</h1> <p>I was sick yesterday, so not much happened.</p> </section> <section> <h1>Today</h1> <p>I have a bunch of things to do today:</p> <ul> <li>Grocery shopping</li> <li>Stop at the bank</li> <li>Dinner and a movie</li> </ul> </section> <section> <h1>Road Blocks</h1> <p>I'm sick!<p> </section> </section> <section class="accordion"> <section> <h1>Yesterday</h1> <p>I was sick yesterday, so not much happened.</p> </section> <section> <h1>Today</h1> <p>I have a bunch of things to do today:</p> <ul> <li>Grocery shopping</li> <li>Stop at the bank</li> <li>Dinner and a movie</li> </ul> </section> <section> <h1>Road Blocks</h1> <p>I'm sick!<p> </section> </section> <section class="accordion"> <section> <h1>Yesterday</h1> <p>I was sick yesterday, so not much happened.</p> </section> <section> <h1>Today</h1> <p>I have a bunch of things to do today:</p> <ul> <li>Grocery shopping</li> <li>Stop at the bank</li> <li>Dinner and a movie</li> </ul> </section> <section> <h1>Road Blocks</h1> <p>I'm sick!<p> </section> </section> <section class="accordion"> <section> <h1>Yesterday</h1> <p>I was sick yesterday, so not much happened.</p> </section> <section> <h1>Today</h1> <p>I have a bunch of things to do today:</p> <ul> <li>Grocery shopping</li> <li>Stop at the bank</li> <li>Dinner and a movie</li> </ul> </section> <section> <h1>Road Blocks</h1> <section class="accordion"> <section> <h1>Yesterday</h1> <p>I was sick yesterday, so not much happened.</p> </section> <section> <h1>Today</h1> <p>I have a bunch of things to do today:</p> <ul> <li>Grocery shopping</li> <li>Stop at the bank</li> <li>Dinner and a movie</li> </ul> </section> <section> <h1>Road Blocks</h1> <p>I'm sick!<p> </section> </section> <p>I'm sick!<p> </section> </section>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Multiple qSA Calls
(function () {
  var accordions, i;
  
  // Make sure the browser supports what we are about to do.
  if (!document.querySelectorAll ||
      !document.body.classList ||
      !Array.prototype.indexOf) return;
  
  // Using a function helps isolate each accordion from the others
  function makeAccordion(accordion) {
    var targets, currentTarget, i;
    
    targets = accordion.querySelectorAll('.accordion > * > h1');
    for(i = 0; i < targets.length; i++) {
      targets[i].addEventListener('click', function () {
        if (currentTarget)
          currentTarget.classList.remove('expanded');
        
        currentTarget = this.parentNode;
        currentTarget.classList.add('expanded');
      }, false);
    }

    accordion.classList.add('js');
  }

  // Find all the accordions to enable
  accordions = document.querySelectorAll('.accordion');
  
  // Array functions don't apply well to NodeLists
  for(i = 0; i < accordions.length; i++) {
    makeAccordion(accordions[i]);
  }
  
})();
pending…
One qSA Call
(function () {
  var accordions, targets, ancestor, i;
  
  if(!document.querySelectorAll || !document.body.classList || !Array.prototype.indexOf) return;
  
  targets = document.querySelectorAll('.accordion > section > h1');
  

  for (i = 0; i < targets.length; i++) {
    ancestor = targets[i].parentNode.parentNode;
    if (!ancestor.classList.contains('js')) {
      ancestor.accordionTargetBehavior = (function () {
        var currentTarget;
        
        return function () {
          if (currentTarget)
            currentTarget.classList.remove('expanded');
          currentTarget = this.parentNode;
          currentTarget.classList.add('expanded');
        };
      })();
    }
    
    targets[i].addEventListener('click', ancestor.accordionTargetBehavior, false);
    ancestor.classList.add('js');
  }
})();
pending…

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

Compare results of other browsers

0 Comments

Yesterday

I was sick yesterday, so not much happened.

Today

I have a bunch of things to do today:

Road Blocks

I'm sick!

Yesterday

I was sick yesterday, so not much happened.

Today

I have a bunch of things to do today:

Road Blocks

I'm sick!

Yesterday

I was sick yesterday, so not much happened.

Today

I have a bunch of things to do today:

Road Blocks

I'm sick!

Yesterday

I was sick yesterday, so not much happened.

Today

I have a bunch of things to do today:

Road Blocks

Yesterday

I was sick yesterday, so not much happened.

Today

I have a bunch of things to do today:

  • Grocery shopping
  • Stop at the bank
  • Dinner and a movie

Road Blocks

I'm sick!

I'm sick!