jQuery vs DOM

Benchmark created on

Preparation HTML

<div class="col">
  <header>
    <h2> text </h2>
    <span> more text </span>
  </header>
</div>
<div class="row">
  <header>
    <h2> text </h2>
    <span> more text </span>
  </header>
</div>
<div class="top">
  <header>
    <h2> text </h2>
    <span> more text </span>
  </header>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
DOM
["col", "row", "top"].forEach(function (className) {
  var header = document.querySelectorAll("." + className)[0].children[0];
  var h2 = header.children[0];
  var span = h2.nextElementSibling;
  var width = 820 - h2.style.width;
  span.style.float = "left";
  span.style.width = width + "px";
});
ready
jQuery
jQuery('.col, .row, .top').each(function(){
    var header = jQuery(this).children().eq(0);
    var h2 = header.children().eq(0);
    var span = h2.next();
    var width = 820 - h2.width();
    span.css({
        'float': 'left',
        'width': width
    });
});
ready
DOM hand-optimised
["col", "row", "top"].forEach(function (className) {
  var header = document.getElementsByClassName(className)[0]
    .firstElementChild
  var h2 = header.firstElementChild;
  var span = h2.nextElementSibling;
  var width = 820 - h2.style.width;
  span.style.float = "left";
  span.style.width = width + "px";
});
ready

Revisions

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