JQ select test

JavaScript performance comparison

Test case created by Zebra Nick

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div>
                                                        <div>
                                                            <div>
                                                                <div>
                                                                    <div>
                                                                        <div>
                                                                            <div>
                                                                                <div>
                                                                                    <div>
                                                                                        <div>
                                                                                            <div>
                                                                                                <div>
                                                                                                    <div>
                                                                                                        <div>
                                                                                                            <div>
                                                                                                                <div id="outer" class="outerClass">
                                                                                                                    <div id="inner" class="innerClass">
                                                                                                                       <span>The inside</span>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var outerz = jQuery('#outer');
};
</script>

Preparation code output

The inside

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
selectByDoc
var selection = jQuery('#inner');
pending…
select by outer
var selection = jQuery('#inner', outerz);
pending…
select by outer 2
var selection = jQuery('#outer #inner');
pending…
div specific
var selection = jQuery('div#inner');
pending…
traverse the whole thing
var selection = jQuery('.innerClass');
pending…
traverse via outer
var selection = jQuery('.innerClass',outerz);
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