Benchmark: JQuery DOM Traversal vs JQuery Selectors

JQuery DOM Traversal vs JQuery Selectors (version: 0)

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

Comparing performance of: JQuery DOM traversal - fully segmented vs JQuery DOM traversal - partially segmented 1 vs JQuery DOM traversal - partially segmented 2 vs JQuery CSS selectors - descendants vs JQuery CSS selectors - partially absolute vs JQuery CSS selectors - absolute

Created: one year ago by: Registered User

Jump to the latest result

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Ubuntu

View result in a separate tab

Test name	Executions per second
JQuery DOM traversal - fully segmented	315789.4 Ops/sec
JQuery DOM traversal - partially segmented 1	362561.0 Ops/sec
JQuery DOM traversal - partially segmented 2	253834.5 Ops/sec
JQuery CSS selectors - descendants	418667.5 Ops/sec
JQuery CSS selectors - partially absolute	426471.6 Ops/sec
JQuery CSS selectors - absolute	431730.3 Ops/sec

JQuery DOM Traversal vs JQuery Selectors (version: 0)

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

Comparing performance of: JQuery DOM traversal - fully segmented vs JQuery DOM traversal - partially segmented 1 vs JQuery DOM traversal - partially segmented 2 vs JQuery CSS selectors - descendants vs JQuery CSS selectors - partially absolute vs JQuery CSS selectors - absolute

Created: one year ago by: Registered User

Jump to the latest result

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A