Run results for: Selector performance in JQuery 3

Run details:

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

Browser: Chrome 76

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
1	94961.3 Ops/sec
2	94139.8 Ops/sec
3	100264.2 Ops/sec
4	146099.6 Ops/sec
5	1077632.0 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