jQuery Unobtrusive Find Performance (v3)

Revision 3 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" /><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>
                        <p>
                                <textarea data-val="true"></textarea>
                                <select data-val="true">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                </select>
                </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
$(selector).find(":input[data-val=true]").each(function() {
  i++;
});
ready
Suggested code
$(selector).find("input").filter("[data-val=true]").each(function() {
  i++;
});
ready
Caching Find
var findResults = $(selector).find("input");
findResults.filter("[data-val=true]").each(function() {
  i++;
});
ready
':Input' Find
$(selector).find(":input").filter("[data-val=true]").each(function() {
  i++;
});
ready
Find All
var sel = $(selector)

var findResults = sel.find("input");
var findResults2 = sel.find("select");
var findResults3 = sel.find("textarea");

 var final =  $.merge(findResults,findResults2);
final = $.merge(findResults,findResults3);

final.filter("[data-val=true]").each(function() {
  i++;
});
ready
Find All with Commas
var sel = $(selector)

var findResults = sel.find("input, select,textarea");

findResults .filter("[data-val=true]").each(function() {
  i++;
});
ready

Revisions

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