Sibling Index

JavaScript performance comparison

Revision 8 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div id="whereami">2</div>
</div>
<script>
Benchmark.prototype.setup = function() {
    function findRow(node){
        var i=1;
        while(node.previousSibling){
            node = node.previousSibling;
            if(node.nodeType === 1){
                i++;
            }
        }
        return i;
    }
   
    function findRow2(node)
    {
        return $(node).index();
    }
   
    function findRow3(node)
    {
        var i = 1;
        while (node = node.previousSibling) {
            if (node.nodeType === 1) { ++i }
        }
        return i;
    }
   
    function findRow4(node)
    {
        return [].indexOf.call(node.parentNode.childNodes, node)
    }
   
    function findRow5(node)
    {
        var i = 2;
        while ((node = node.previousSibling) != null)
            i += node.nodeType ^ 3;
        return i >> 1;
    }
   
    function findRow6(node)
    {
        var i = 1;
        while (node = node.previousElementSibling)
            ++i;
        return i;
    }
   
    function findRow7(node)
    {
        var i = 1,
            prev;
        while (true)
            if (prev = node.previousElementSibling) {
                node = prev;
                ++i;
            } else if (node = node.previousSibling) {
                if (node.nodeType === 1) {
                    ++i;
                }
            } else break;
        return i;
    }
    function findRow8(node) {
        var children = node.parentNode.children,
            i = 0,
            len = children.length;
        for( ; i < len && children[i] !== node; i++)
            ; // <-- empty statement
   
        return i === len ? -1 : i;
    }
   
    function findRow9(node) {
        var i = 1,
            prev = node.previousElementSibling;
   
        if (prev) {
            do ++i;
            while (prev = prev.previousElementSibling);
        } else {
            while (node = node.previousSibling) {
                if (node.nodeType === 1) {
                    ++i;
                }
            }
        }
        return i;
    }
    function findRow10(node) {
        return jQuery(node).data('index');
    }
    function findRow11(node) {
        return node.index;
    }
   
    var node = document.getElementById('whereami'); //div node to find
   
    // give jQuery's .data() a head start by pre-populating
    var childs = node.parentNode.getElementsByTagName('*');
   
    for (var i=0, len = childs.length;i < len;i++){
      jQuery(childs[i]).data('index',i);
    childs[i].index = i;
    }
};
</script>

Preparation code output

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Original
findRow(node);
pending…
jQuery
findRow2(node);
pending…
Jack's one
findRow3(node);
pending…
Experimental and wrong
findRow4(node);
pending…
A little bit weird answer.
findRow5(node);
pending…
previousElementSibling
findRow6(node);
pending…
previousElementSibling with old browser fix
findRow7(node);
pending…
compare node to children
findRow8(node);
pending…
previousElementSibling - browser fix in separate loop
findRow9(node);
pending…
static index from jQuery data cache
findRow10(node);
pending…
Static index no jQuery
findRow11(node);
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