Run results for: jQuery class selector

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8

Browser: Safari 10

Operating system: Mac OS X 10.12.6

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Id and class chaining selector	323155.2 Ops/sec
Class selector only	570200.0 Ops/sec
Id selector then .find	439855.9 Ops/sec
Class selector using parent element	395986.1 Ops/sec
parentEl with .find	791879.7 Ops/sec
Class selector using parentEl	551895.9 Ops/sec

HTML Preparation code:

<div id='curBody1'>
  <div>
    <span>
      <div>
        This is a div we're NOT looking for.
      </div>
    </span>
  </div>
</div>
<div id='curBody2'>
  <div>
    <span>
      <div class='desired-element'>
        This is the div we're looking for.
      </div>
    </span>
  </div>
</div>

Script Preparation code:

var curElement = null;
var parentEl = $("#curBody2"); //Used for last two test cases only.

Tests:

Id and class chaining selector
curElement = $('#curBody2 .desired-element');
Class selector only
curElement = $('.desired-element');
Id selector then .find
curElement = $('#curBody2').find('.desired-element');
Class selector using parent element
curElement = $('.desired-element',$('#curBody2'));
parentEl with .find
curElement = parentEl.find('.desired-element');
Class selector using parentEl
curElement = $('.desired-element',parentEl);

Run results for: jQuery class selector

This will test the difference between selecting an element using its class vs getting a handle on the parent element and then navigating to the child.

Id and class chaining selector

Class selector only

Id selector then .find

Class selector using parent element

parentEl with .find

Class selector using parentEl