jQuery Selector Benchmark

JavaScript performance comparison

Revision 12 of this test case created

Info

You can select children on a DOM in so many ways. This test breaks down selecting children in a list with use of a context, no context, and child selectors.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
                <div id="page1" data-type="page">
                        <div class="titlebar"><h1>SOME SETTINGS</h1></div>
                        <div class="content with_footbar scrollable_y">
                                <form class="usetheme">
                                        <label>Choose a nickname<input type="text" /></label>
                                        <label>Choose a location<input type="text" /></label>
                                        <label>Choose a range<input type="range" min=0 max=2 /></label>
                                        <table class="scale">
                                                <tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
                                        </table>
                                        <label>Select Gender</label>
                                        <table class="leftscale">
</div>
</div>
                <div id="page2" data-type="page">
                        <div class="titlebar"><h1>SOME SETTINGS</h1></div>
                        <div class="content with_footbar scrollable_y">
                                <form class="usetheme">
                                        <label>Choose a nickname<input type="text" /></label>
                                        <label>Choose a location<input type="text" /></label>
                                        <label>Choose a range<input type="range" min=0 max=2 /></label>
                                        <table class="scale">
                                                <tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
                                        </table>
                                        <label>Select Gender</label>
                                        <table class="leftscale">
</div>
</div>
                <div id="page3" data-type="page">
                        <div class="titlebar"><h1>SOME SETTINGS</h1></div>
                        <div class="content with_footbar scrollable_y">
                                <form class="usetheme">
                                        <label>Choose a nickname<input type="text" /></label>
                                        <label>Choose a location<input type="text" /></label>
                                        <label>Choose a range<input type="range" min=0 max=2 /></label>
                                        <table class="scale">
                                                <tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
                                        </table>
                                        <label>Select Gender</label>
                                        <table class="leftscale">
</div>
</div>

<script>
  Benchmark.prototype.setup = function() {
    //Save The Context
    var parentContext = document.getElementById('parent');
  };
</script>

Preparation code output

SOME SETTINGS

1 KM2 KM5 KM

SOME SETTINGS

1 KM2 KM5 KM

SOME SETTINGS

1 KM2 KM5 KM

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Context
$('.child','div');
pending…
Find
$('div.child');
pending…
Alternate Find
$('div').find('.child');
pending…
Children
$('div').children('.child');
pending…
Parent / Child Selector
$('div > .child');
pending…
Class Only
$('.child');
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