Run results for: JQuery DOM Traversal vs JQuery Selectors

Run details:

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

Browser: Chrome 106

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
JQuery DOM traversal - fully segmented	48671.1 Ops/sec
JQuery DOM traversal - partially segmented 1	62701.2 Ops/sec
JQuery DOM traversal - partially segmented 2	70213.0 Ops/sec
JQuery CSS selectors - descendants	125860.2 Ops/sec
JQuery CSS selectors - partially absolute	138662.5 Ops/sec
JQuery CSS selectors - absolute	117411.6 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<div id="something">
    <div id="something-inner">
        <div class="item">
            <p class="itemPara"></p>
        </div>
        <div class="item">
            <p class="itemPara"></p>
        </div>
        <div class="item">
            <p></p>
        </div>
    </div>
    <div id="something-inner-another"></div>
</div>

Tests:

JQuery DOM traversal - fully segmented
$('#something').find('#something-inner').find('.item').find('.itemPara');
JQuery DOM traversal - partially segmented 1
$('#something').find('#something-inner').find('.item .itemPara');
JQuery DOM traversal - partially segmented 2
$('#something #something-inner').find('.item .itemPara');
JQuery CSS selectors - descendants
$('#something #something-inner .item .itemPara');
JQuery CSS selectors - partially absolute
$('#something #something-inner .item>.itemPara');
JQuery CSS selectors - absolute
$('#something>#something-inner>.item>.itemPara');

Run results for: JQuery DOM Traversal vs JQuery Selectors

Performance benchmark for querying DOM elements using JQuery DOM traversal and single CSS Selector

JQuery DOM traversal - fully segmented

JQuery DOM traversal - partially segmented 1

JQuery DOM traversal - partially segmented 2

JQuery CSS selectors - descendants

JQuery CSS selectors - partially absolute

JQuery CSS selectors - absolute