jQuery children vs find

JavaScript performance comparison

Revision 36 of this test case created by

Preparation code

<form id="formElem" name="formElem" action="" method="post">
                    <fieldset class="step one">
                      <span class="dummy"></span>
                      <span class="dummy"></span>
                      <span class="dummy"></span>

                      <span class="span">

                        <span class="dummy"></span>
                        <span class="dummy"></span>
                        <span class="dummy"></span>

                        <img src="1.jpg" class="image1">

                      </span>
                      <span class="dummy"></span>
                      <span class="dummy"></span>
                      <span class="dummy"></span>

                    </fieldset>
                    <fieldset class="step two">

                      <span class="dummy"></span>
                      <span class="dummy"></span>
                      <span class="dummy"></span>

                      <span class="span">

                        <span class="dummy"></span>
                        <span class="dummy"></span>

                        <img src="2.jpg" class="image2">

                      </span>
                    </fieldset>
                    <fieldset class="step three">
                      <img src="3.jpg" class="image3">

                      <span class="dummy"></span>
                      <span class="dummy"></span>
                      <span class="dummy"></span>
                    </fieldset>
                </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    

Preparation code output

<form id="formElem" name="formElem" action="" method="post"> <fieldset class="step one"> <span class="dummy"></span> <span class="dummy"></span> <span class="dummy"></span> <span class="span"> <span class="dummy"></span> <span class="dummy"></span> <span class="dummy"></span> <img src="1.jpg" class="image1"> </span> <span class="dummy"></span> <span class="dummy"></span> <span class="dummy"></span> </fieldset> <fieldset class="step two"> <span class="dummy"></span> <span class="dummy"></span> <span class="dummy"></span> <span class="span"> <span class="dummy"></span> <span class="dummy"></span> <img src="2.jpg" class="image2"> </span> </fieldset> <fieldset class="step three"> <img src="3.jpg" class="image3"> <span class="dummy"></span> <span class="dummy"></span> <span class="dummy"></span> </fieldset> </form>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
one level - children
$('#formElem').children('.step');
pending…
one level - find
$('#formElem').find('.step')
pending…
one level - select child
$('#formElem .step')
pending…
two levels - children
$('#formElem').children('.two').children('.span')
pending…
two levels - find
$('#formElem').find('.span')
pending…
three levels - children & find
$('#formElem').children('.two').find('.image2')
pending…
three levels - find
$('#formElem').find('.image2')
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.

0 Comments