Benchmark: Selector performance in JQuery 3

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3
4
5
6
7
8
9

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks:

Selector performance in JQuery 3 (version: 9)

Comparing performance of: 1 vs 2 vs 3 vs 4 vs 5 vs 6 vs 7 vs 8 vs 9

Created: 6 years ago by: Registered User

Jump to the latest result

1

2

3

4

5

6

7

8

9

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results