Run results for: jQuery class selector

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Browser: Chrome 52

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Id and class chaining selector	91379.3 Ops/sec
Class selector only	528273.3 Ops/sec
Id selector then .find	388520.7 Ops/sec
Class selector using parent element	353119.5 Ops/sec
parentEl with .find	576285.4 Ops/sec
Class selector using parentEl	472316.6 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