jquery v poj nodelist iteration

Benchmark created by Paul Grenier on November 2, 2010

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
  <ul>
    <li><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
    <li><a href="#">item 6</a></li>
    <li><a href="#">item 7</a></li>
    <li><a href="#">item 8</a></li>
    <li><a href="#">item 9</a></li>
  </ul>
</div>
<script>
  var pojList = document.getElementsByTagName('a'),
      jQueryList = $('a'),
      customMakeArray = function(nodeList) {
    var i, len = nodeList.length,
        arr = [];
    for (i = 0; i < len; ++i) {
     arr[i] = nodeList[i];
    }
    return arr;
      },
      pojMakeArray = function(nodeList) {
    return Array.prototype.slice.apply(nodeList);
      };
</script>

Test runner

jQueryList.each(function() {
 this.nodename;
});

jQueryList.each(function(i, e) {
 e.nodename;
});

var i, len = pojList.length;

for (i = 0; i < len; ++i) {
 pojList[i].nodename;
}

var i, list = pojMakeArray(pojList),
    len = list.length;

for (i = 0; i < len; ++i) {
 list[i].nodename;
}

var i, list = customMakeArray(pojList),
    len = list.length;

for (i = 0; i < len; ++i) {
 list[i].nodename;
}

var i, curr;

for (i = -1; curr = pojList[++i];) {
 curr.nodename;
}

var i, list = pojMakeArray(pojList),
    curr;

for (i = -1; curr = list[++i];) {
 curr.nodename;
}

var i, list = jQueryList,
    curr;

for (i = -1; curr = list[++i];) {
 curr.nodename;
}

Revisions

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

• Revision 1: published by Paul Grenier on November 2, 2010