Fastest way to get index of element in a NodeList

JavaScript performance comparison

Test case created by Brunoais

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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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.previousSibling) { ++k;}
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. Here’s a list of current revisions for this page:

1 comment

some commented :

This test is flawed because in the for example previousElementSibling is used (with a result of 24) but in the while example previousSibling is used with the result 49.

The indexOf can in this test be optimized if the live HTMLCollection is converted to an array.

Add a comment