xpath-vs-selectorall (v4)

Revision 4 of this benchmark created by Craig Patik on

Description

DOM Queries for xpath vs selectors vs tags.

This revision (4) has a more robust "find elements with this class" function for the 'tagName' and xpath tests since that's what you'd want in the real world.

Preparation HTML

<div>
  <p>
    <ul>
      <li>
        <a class="test foo"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="meh"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="wtf"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test bar"></a>
      </li>
    </ul>
  </p>
</div>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></a>
      </li>
    </ul>
  </p>
</div>

Setup

var a = [];
    var doc = document;

Test runner

Ready to run.

Testing in
TestOps/sec
xpath
var xpathinput = doc.evaluate("//a[contains(concat(' ', @class, ' '),' test ')]",doc.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
ready
querySelector
var queryselectorinput = doc.querySelectorAll('a.test');
 
ready
tagName
var arrNodes = doc.getElementsByTagName('a');
var tagnameinput = [];
var hasClass = function(el, theClass) {
  if (!el.className) { return false; }
  return (" " + el.className + " ").indexOf(" " + theClass + " ") > -1;
};
for(var i = 0, l = arrNodes.length; i < l; i++) {
  if (hasClass(arrNodes[i], 'test')) {
    tagnameinput.push(arrNodes[i]);
  }
}
ready

Revisions

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

  • Revision 1: published by Ian Sutherland on
  • Revision 2: published on
  • Revision 3: published by Divya Manian on
  • Revision 4: published by Craig Patik on
  • Revision 5: published by Mikhail Kalashnik on
  • Revision 6: published by Ian Sutherland on