DOM selection vs child selection (v2)

Revision 2 of this benchmark created by dane on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="cms-copy countdown" id="countdown_holder">
        <div class="days"><span class="large" id="days"></span>days</div>
        <div class="hours"><span class="large" id="hours"></span>hours</div>
        <div class="mins"><span class="large" id="mins"></span>minutes</div>
      </div>

Setup

var parent=document.getElementById("countdown_holder");
    var days=parent.children[0].children[0];
    var hours=parent.children[1].children[0];
    var minutes=parent.children[2].children[0];

Test runner

Ready to run.

Testing in
TestOps/sec
1 DOM selection, children filled in
var countdownHolder = document.getElementById('countdown_holder');
countdownHolder.children[0].children[0].innerHTML = "2";
countdownHolder.children[1].children[0].innerHTML = "3";
countdownHolder.children[2].children[0].innerHTML = "4";
ready
3 DOM selections, no children
  document.getElementById('days').innerHTML = "2";
  document.getElementById('hours').innerHTML = "3";
  document.getElementById('mins').innerHTML = "4";
ready
jQuery
$("#days").html("2");
$("#hours").html("3");
$("#minutes").html("4");
ready
define each once
days.innerHTML = "2";
hours.innerHTML = "3";
minutes.innerHTML = "4";
ready

Revisions

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

  • Revision 1: published by Pete on
  • Revision 2: published by dane on