<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>
$('#something').find('#something-inner').find('.item').find('.itemPara');
$('#something').find('#something-inner').find('.item .itemPara');
$('#something #something-inner').find('.item .itemPara');
$('#something #something-inner .item .itemPara');
$('#something #something-inner .item>.itemPara');
$('#something>#something-inner>.item>.itemPara');
--enable-precise-memory-info
flag.
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 |
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 |
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.
Benchmark Overview
The provided benchmark measures the performance of two approaches to query DOM elements using jQuery:
find()
method to traverse the DOM from a starting element.Options Compared
The benchmark compares four options:
find()
calls with successive selectors, e.g., $('#something').find('#something-inner').find('.item').find('.itemPara');
.find()
call with two selectors, e.g., $('#something').find('#something-inner').find('.item .itemPara');
.$('#something>#something-inner>.item>.itemPara');
.Pros and Cons
Here's a brief summary of the pros and cons of each approach:
find()
calls, which can lead to slower performance due to the overhead of parsing selectors.find()
calls compared to fully segmented, resulting in slightly faster performance.Library and Purpose
The benchmark uses jQuery, a popular JavaScript library for DOM manipulation and event handling. The library provides an easy-to-use interface for querying the DOM using its find()
method or CSS selector syntax.
Special JS Features/Syntax
None are mentioned in this specific benchmark.
Other Alternatives
If you're looking for alternative approaches to query DOM elements, consider:
querySelector
and querySelectorAll
, which provide a more direct way of selecting elements.find()
method.Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.
In conclusion, MeasureThat.net's benchmark helps you understand the performance differences between various approaches to query DOM elements using jQuery. By considering the pros and cons of each option, you can make informed decisions about which approach to use in your own projects.