Sort array of DOM nodes parent to child

JavaScript performance comparison

Test case created by benekastah

Info

Tests from answers to this SO question.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<div id='div-container'>
        <div id='a'>
                <div id='a-1'></div>
                <div id='a-2'></div>
                <div id='a-3'>
                        <div id='a-3-1'></div>
                        <div id='a-3-2'></div>
                </div>
        </div>

        <div id='b'></div>

        <div id='c'>
                <div id='c-1'>
                        <div id='c-1-1'></div>
                        <div id='c-1-2'>
                                <div id='c-1-2-1'></div>
                                <div id='c-1-2-2'>
                                        <div id='c-1-2-2-1'></div>
                                </div>
                        </div>
                </div>
        </div>

        <div id='d'></div>
</div>
 
<script>
Benchmark.prototype.setup = function() {
    var divs = _.chain(jQuery('div#div-container div')).toArray().shuffle().value()
   
    function isParentOf(parent, elm) {
        while (elm) {
            elm = elm.parentNode;
            if (elm === parent) {
                return true;
            }
        }
        return false;
    }
   
    if(!Array.prototype.indexOf){
        Array.prototype.indexOf= function(what, i){
            if(typeof i!= 'number') i= 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what) return i;
                ++i;
            }
            return -1;
        }
    }
   
    function nodeSort(nodesArray, pa){
        pa= pa || document;
        var original= [], src= pa.getElementsByTagName('*'), L= src.length;
        for(var i= 0; i<L; i++){
            if(nodesArray.indexOf(src[i])!=-1) original.push(src[i]);
        }
        return nodesArray.sort(function(a, b){
            return original.indexOf(a)- original.indexOf(b);
        });
    }
};
</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
Native sort, using jQuery find
divs.sort(function (a, b) {
  return $(a).find(b).length ? -1 :
         $(b).find(a).length ? 1 :
         0
})
pending…
jQuery unique
jQuery.unique(divs)
pending…
DOM search for descendants
divs.sort(function (a, b) {
  return isParentOf(a, b) ? -1 :
         isParentOf(b, a) ? 1 :
         0
})
pending…
DOM search order defined in document
nodeSort(divs)
pending…

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

Compare results of other browsers

0 comments

Add a comment