jQuery .first() vs :first selector

JavaScript performance comparison

Revision 3 of this test case created by Joshua Piccari

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form accept-charset="UTF-8" action="/signin" data-remote="true" id="new_session" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="uK7TWhn6mJvofc7+FpiZuda7sbKqgRPSfv+ebpYRv0k=" /></div>
       
       
        <div class="control-group">
                <div class="field_with_errors"><label for="session_username">Username:</label></div>
                <div class="field_with_errors"><input class="input-block-level" id="session_username" name="session[username]" placeholder="Username" size="30" type="text" /></div></div>

                <div class="field_with_errors"><label for="session_password">Password:</label></div>
                <div class="field_with_errors"><input class="input-block-level" id="session_password" name="session[password]" placeholder="Password" size="30" type="password" /></div>
        </div>
       
        <div class="actions">
                <input class="btn btn-success" type="submit" value="Sign In" />
                <div class="ajax-loader" style="display: none;"></div>
        </div>
</form>

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
.first()
$('form').find('.field_with_errors *:input').first();
pending…
:first
$('form').find('.field_with_errors *:input:first');
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