jQuery children vs find

JavaScript performance comparison

Revision 36 of this test case created

Info

This testcase compares the performance from .children() and .find()

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="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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
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. Here’s a list of current revisions for this page:

0 comments

Add a comment