xpath-vs-selectorall-vs jQuery (v6)

Revision 6 of this benchmark created by Ian Sutherland on


Description

DOM Queries for xpath vs selectors vs tags.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
  <p>
    <ul>
      <li>
        <a class="test"></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"></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[@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 = [];
for (var i = 0, l = arrNodes.length; i < l; i++) {
  if (arrNodes[i].getAttribute('class') == 'test') {
    tagnameinput.push(arrNodes[i]);
  }
}
ready
className
var arrNodes = doc.getElementsByClassName('test');
var tagnameinput = [];
for (var i = 0, l = arrNodes.length; i < l; i++) {
  if (arrNodes[i].tagName == 'a') {
    tagnameinput.push(arrNodes[i]);
  }
}
ready
vs jQuery
var elems = $('a.test');
ready
reverse loop
var arrNodes = doc.getElementsByClassName('test');
var i = arrNodes.length;
var tagnameinput = [];
while(i--){
  if (arrNodes[i].tagName === 'a') {
    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