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	86379.2 Ops/sec
Class selector only	459428.3 Ops/sec
Id selector then .find	373143.7 Ops/sec
Class selector using parent element	318914.0 Ops/sec
parentEl with .find	572784.2 Ops/sec
Class selector using parentEl	423494.8 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