MeasureThat.net

Run results for: JQuery DOM Traversal vs JQuery Selectors

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

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
Firefox 131
Windows
Desktop
4 months ago
Test name Executions per second
JQuery DOM traversal - fully segmented 408970.3 Ops/sec
JQuery DOM traversal - partially segmented 1 430054.8 Ops/sec
JQuery DOM traversal - partially segmented 2 290532.0 Ops/sec
JQuery CSS selectors - descendants 525348.5 Ops/sec
JQuery CSS selectors - partially absolute 511771.5 Ops/sec
JQuery CSS selectors - absolute 543387.4 Ops/sec
HTML Preparation code:
AخA
 
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
2
<div id="something">
3
    <div id="something-inner">
4
        <div class="item">
5
            <p class="itemPara"></p>
6
        </div>
7
        <div class="item">
8
            <p class="itemPara"></p>
9
        </div>
10
        <div class="item">
11
            <p></p>
12
        </div>
13
    </div>
14
    <div id="something-inner-another"></div>
15
</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');