Benchmark: jQuery class selector

jQuery class selector (version: 0)

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.

Comparing performance of: Id and class chaining selector vs Class selector only vs Id selector then .find vs Class selector using parent element vs parentEl with .find vs Class selector using parentEl

Created: 7 years ago by: Guest

Jump to the latest result

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Id and class chaining selector
Class selector only
Id selector then .find
Class selector using parent element
parentEl with .find
Class selector using parentEl

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 6 years ago)

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/OS: Safari 10 on Mac OS X 10.12.6

View result in a separate tab

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

jQuery class selector (version: 0)

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.

Comparing performance of: Id and class chaining selector vs Class selector only vs Id selector then .find vs Class selector using parent element vs parentEl with .find vs Class selector using parentEl

Created: 7 years ago by: Guest

Jump to the latest result

Id and class chaining selector

Class selector only

Id selector then .find

Class selector using parent element

parentEl with .find

Class selector using parentEl

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A