Fastest way to get index of element in a NodeList

JavaScript performance comparison

Revision 3 of this test case created by

Preparation code

	<div class="main">
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
		<div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>
	</div>
      
<script>
Benchmark.prototype.setup = function() {
  var main = document.querySelector('div.main');
  var mainC = main.children;

};
</script>

Preparation code output

<div class="main"> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> <div><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
using the indeOf of Array
var columnNum = Array.prototype.indexOf.call(mainC, mainC[24]);
pending…
Using "for" loop
for (var k=0,e=mainC[24]; e = e.previousElementSibling; ++k);
pending…
using "while" loop
var k=0, e=mainC[24];
while (e = e.previousElementSibling) { ++k;}
pending…
Convert children to array before search
var ary = Array.prototype.slice.call(mainC, 0);
var index = ary.indexOf(mainC[24]);
pending…

Compare results of other browsers

Revisions

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

0 Comments