xpath-vs-dom-vs-jquery (v2)

Revision 2 of this benchmark created by Matt on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="box">
    <h3>Some title</h3>
    <p class="buttons">
        <button onclick="myfunction(this)">Trigger</button>
    </p>
</div>

<script>
  var button, $button;
  
  $(document).ready(function() {
      $button = $("div.box button");
      button = $button[0];
  });
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Traversal
var header = button.parentNode.parentNode.childNodes;
while (header && header.nodeName !== "H3") {
  header = header.nextSibling;
}
ready
XPath
var heading = document.evaluate("../../h3", button, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
ready
JQuery
var heading = $button.parent().parent().children("h3").first();
ready
gEBTN
var grandParent = button.parentNode.parentNode;
var headers = grandParent.getElementsByTagName("h3");
var header;
for (var i = 0, len = headers.length; i < len; i++) {
  if (headers[i].parentNode === grandParent) {
    header = headers[i];
    break;
  }
}
ready
filter
var header = [].filter.call(button.parentNode.parentNode.childNodes, function (ch) { return ch.nodeName === "H3"; })[0];
ready

Revisions

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

  • Revision 1: published by Scott Sauyet on
  • Revision 2: published by Matt on