Clone NodeList (v8)

Revision 8 of this benchmark created by Karl Seamon on

Description

These tests compare different methods to clone a nodelist into an array (comparable to array-clone).

Note: Some browser cannot use nodelist as apply arguments

Preparation HTML

<div id='testdiv'>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
  var div = document.getElementById('testdiv'),
      span = document.createElement('span'),
      slice = Array.prototype.slice,
      push = Array.prototype.push,
      unshift = Array.prototype.unshift,
      array, i, l, n, childs;
  
  for (var i = 0; i < 100; i++) {
   div.appendChild(span.cloneNode(false)); // Add false/ true, or cloneNode will fail silently in FF
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
slice.call
array = slice.call(div.childNodes, 0);
ready
slice.apply
array = slice.apply(div.childNodes, [0]);
ready
push.apply
push.apply((array = []), div.childNodes);
ready
unshift.apply
unshift.apply((array = []), div.childNodes);
ready
Optimum decreasing loop
kids = div.childNodes;
l = kids.length;
array = new Array(l);
for (i = l; i--;) {
 array[i] = kids[i];
}
ready
Optimum increasing loop
kids = div.childNodes;
l = kids.length;
array = new Array(l);
for (i = -1; ++i < l;) {
 array[i] = kids[i];
}
ready
__proto__ change
kids = div.childNodes;
kids.__proto__ = Array.prototype;
// NOTE: only modern browsers support this and other just set the __proto__ property
ready
Optimum decreasing loop w/o length
kids = div.childNodes;
l = kids.length;
array = [];
for (i = l; i--;) {
 array[i] = kids[i];
}
ready

Revisions

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

  • Revision 2: published by Denis G. on
  • Revision 7: published by Name64 on
  • Revision 8: published by Karl Seamon on