Fastest way to get index of element in a NodeList

JavaScript performance comparison

Revision 2 of this test case created by some

Info

Changed tests to use the same method (previousElementSibling) in both the for and while example, there isn't that much difference anymore between them. Before the while used previousSibling and the for used previousElementSibling, and giving different results.

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.previousElementSibling) { ++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:

0 comments

Add a comment