jQuery Unobtrusive Find Performance (v7)

Revision 7 of this benchmark created on

Description

Testing the performance of jQuery Unobtrusive - comparing current code to a suggested change. https://aspnetwebstack.codeplex.com/workitem/308

Current: $(selector).find(":input[data-val=true]").each(....)

Suggested: $(selector).find("input").filter("[data-val=true]").each(..)

Preparation HTML

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

    <div>
        


<h2>Create</h2>

<form action="/Home/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="_P5ot6UgoaIklDk896s2sjcd8PPafvmhKqdj3KmsdwxP-h5-FFN2j1rc_nauflT7yc0Anu4N2SqWmpNB8my8BqvMydiAMJb4utLBZlxFpdA1" />    <fieldset>
        <legend>Person</legend>

        <div class="editor-label">
            <label for="Name">Name</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Age">Age</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 100." data-val-range-max="100" data-val-range-min="1" data-val-required="The Age field is required." id="Age" name="Age" type="number" value="" />
            <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Hometown">Hometown</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-length="The field Hometown must be a string with a maximum length of 25." data-val-length-max="25" id="Hometown" name="Hometown" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Hometown" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="IsAwesome">IsAwesome</label>
        </div>
        <div class="editor-field">
            <input class="check-box" data-val="true" data-val-required="The IsAwesome field is required." id="IsAwesome" name="IsAwesome" type="checkbox" value="true" checked="true" /><input name="IsAwesome" type="hidden" value="false" />
            <span class="field-validation-valid" data-valmsg-for="IsAwesome" data-valmsg-replace="true"></span>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
</form>
<div>
    <a href="/">Back to List</a>
</div>

    </div>

Setup

selector = "form";
    i = 0;

Teardown


    if (i === 0)
    {
        throw null;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Current code
$(".check-box").filter(":checked").each(function() {
  i++;
});
ready
Suggested code
$("input").filter(".check-box").filter(":checked").each(function() {
  i++;
});
ready
Caching Find
$(".check-box:checked").each(function() {
  i++;
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.