Browser Diet - jQuery Selectors

JavaScript performance comparison

Revision 7 of this test case created by Scott

Preparation code

<div id="advanced_options" class="">
  <fieldset>
    <legend>
      View Options
    </legend>
    <form method="get">
      <ul>
        <li>
          Sales Event:
          <select id="sales_event" name="sales_event" class="sales_event">
            <option value="-1">
              Choose Event
            </option>
            <option value="Generate">
              Generate
            </option>
            <option value="Contract">
              Contract
            </option>
            <option value="Close">
              Close
            </option>
            <option value="Lost">
              Lost
            </option>
          </select>
        </li>
        <li>
          Status:
          <select id="s_status" name="s_status" class="s_status">
            <option value="Cancelled">
              Cancelled
            </option>
            <option value="Completed">
              Completed
            </option>
            <option value="In Progress" selected="selected">
              In Progress
            </option>
          </select>
        </li>
        <li>
          Manager:
          <select id="sales_manager" name="sales_manager" class="sales_manager">
            <option value=" ">
              Choose Manager
            </option>
            <option value="Debbie DooDoo">
              Debbie DooDoo
            </option>
            <option value="Fred Franks">
              Fred Franks
            </option>
            <option value="Holly Happy">
              Holly Happy
            </option>
            <option value="Troy Trip">
              Troy Trip
            </option>
          </select>
        </li>
        <li>
          AE:
          <select id="sales_aes" name="sales_aes" class="sales_aes">
            <option value=" ">
              Choose AE
            </option>
          </select>
        </li>
        <li>
          Date Between:
          <br />
          <input type="text" class="short_input" id="date_from" name="date_from" value=""
          />
          -
          <input type="text" class="short_input" id="date_to" name="date_to" value="" />
        </li>
        <li>
          <input type="submit" class="updatebutton" value="Update" />
        </li>
      </ul>
      <input type="hidden" value="Tampa" name="division" />
      <input type="hidden" value="1" name="manager_level" />
      <input type="hidden" value="" name="manager" />
      <input type="hidden" value="" name="date_from" />
      <input type="hidden" value="" name="date_to" />
      <input type="hidden" value="In Progress" name="s_status" />
      <input type="hidden" value="" name="sales_event" />
    </form>
  </fieldset>
</div>
<script>
  toggleItem = function(id) {
    var item = document.getElementById(id);
    if (item.style.display == "block") {
      item.style.display = 'none';
    } else {
      item.style.display = 'block';
    }
  }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
    

Preparation code output

<div id="advanced_options" class=""> <fieldset> <legend> View Options </legend> <form method="get"> <ul> <li> Sales Event: <select id="sales_event" name="sales_event" class="sales_event"> <option value="-1"> Choose Event </option> <option value="Generate"> Generate </option> <option value="Contract"> Contract </option> <option value="Close"> Close </option> <option value="Lost"> Lost </option> </select> </li> <li> Status: <select id="s_status" name="s_status" class="s_status"> <option value="Cancelled"> Cancelled </option> <option value="Completed"> Completed </option> <option value="In Progress" selected="selected"> In Progress </option> </select> </li> <li> Manager: <select id="sales_manager" name="sales_manager" class="sales_manager"> <option value=" "> Choose Manager </option> <option value="Debbie DooDoo"> Debbie DooDoo </option> <option value="Fred Franks"> Fred Franks </option> <option value="Holly Happy"> Holly Happy </option> <option value="Troy Trip"> Troy Trip </option> </select> </li> <li> AE: <select id="sales_aes" name="sales_aes" class="sales_aes"> <option value=" "> Choose AE </option> </select> </li> <li> Date Between: <br /> <input type="text" class="short_input" id="date_from" name="date_from" value="" /> - <input type="text" class="short_input" id="date_to" name="date_to" value="" /> </li> <li> <input type="submit" class="updatebutton" value="Update" /> </li> </ul> <input type="hidden" value="Tampa" name="division" /> <input type="hidden" value="1" name="manager_level" /> <input type="hidden" value="" name="manager" /> <input type="hidden" value="" name="date_from" /> <input type="hidden" value="" name="date_to" /> <input type="hidden" value="In Progress" name="s_status" /> <input type="hidden" value="" name="sales_event" /> </form> </fieldset> </div>

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
Class Selector
var $test = $(".sales_manager").val();
pending…
ID Selector
var $test = $("#sales_manager").val();
pending…
Toggle Class JQuery
$('#advanced_options').toggleClass('hidden');
pending…
Native Toggle
toggleItem('advanced_options');
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

View Options
  • Sales Event:
  • Status:
  • Manager:
  • AE:
  • Date Between:
    -