Run results for: Selector performance in JQuery 3

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Browser: Firefox 68

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
1	131456.6 Ops/sec
2	133960.1 Ops/sec
3	127155.5 Ops/sec
4	236795.4 Ops/sec
5	2512495.0 Ops/sec
6	158591.6 Ops/sec

HTML Preparation code:

<div id="my-id">
    <div class="grand">
        <div class="parent"> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

Script Preparation code:

$('div#my-id div.grand div.parent div.my-class')
$('#my-id .grand .parent div.my-class')
$('#my-id .grand .parent .my-class')
$('.my-class')
document.getElementsByClassName('my-class')
$('div.my-class')
$('#my-id').find('.my-class')
jQuery('.my-class')
jQuery('#my-id').find('.my-class')

Tests:

1
$('div#my-id div.grand div.parent div.my-class')
2
$('#my-id .grand .parent div.my-class')
3
$('#my-id .grand .parent .my-class')
4
$('.my-class')
5
document.getElementsByClassName('my-class')
6
$('div.my-class')
7
$('#my-id').find('.my-class')
8
jQuery('.my-class')
9
jQuery('#my-id').find('.my-class')

Run results for: Selector performance in JQuery 3

1

2

3

4

5

6

7

8

9