Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector vs Closest!
(version: 0)
Comparing performance of:
Closest? vs querySelector?
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div><div><div> <div data-parent="parent-id"> <div><div> <div data-target="target-id"> <div><div> <div data-clicked="clicked-id"></div> </div></div> </div> </div></div> </div> </div></div></div>
Tests:
Closest?
document.querySelector('[data-clicked]').closest('[data-target]')
querySelector?
document.querySelector('[data-parent="parent-id"]:has([data-target="target-id"])')
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Closest?
querySelector?
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=526454" width="100%" height="500px"></iframe>
Closest?
1.2M/s
querySelector?
511K/s
View exact numbers
Test name
Executions per second
✓
Closest?
1,239,540 Ops/sec
querySelector?
510,913 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark JSON and explain what is being tested, compared, and other considerations. **Benchmark Definition** The benchmark measures the performance difference between two approaches to find elements with specific attributes in an HTML document using JavaScript: `querySelector` vs `closest`. **Options Compared** 1. **`document.querySelector('[data-clicked]').closest('[data-target]')`**: This approach uses the `querySelector` method to select an element with the attribute `[data-clicked]`, and then calls the `closest` method on that element to find another element with the attribute `[data-target]`. 2. **`document.querySelector('[data-parent="parent-id"]:has([data-target="target-id"])')`**: This approach uses the `querySelector` method to select an element with the attribute `[data-parent="parent-id"]`, and then calls the `has` method on that element to check if it contains another element with the attribute `[data-target="target-id"]`. **Pros and Cons of Each Approach** 1. **`document.querySelector('[data-clicked]').closest('[data-target]')`**: * Pros: Simple and straightforward. * Cons: May perform unnecessary checks or traversals to find the closest matching element, leading to potential performance overhead. 2. **`document.querySelector('[data-parent="parent-id"]:has([data-target="target-id"])')`**: * Pros: More efficient, as it allows the browser to short-circuit the search once it finds a parent element with the specified attribute. * Cons: May be slower for very deep or complex DOM trees. **Library and Purpose** There is no explicit library mentioned in the benchmark definition. However, `querySelector` and `closest` are built-in methods provided by modern browsers' JavaScript APIs. **Special JS Features or Syntax** None are explicitly mentioned, but the use of attribute selectors (`[data-clicked]`, `[data-target]`) and the `:has` pseudo-class are supported by most modern browsers. **Other Considerations** * The benchmark uses a relatively simple HTML structure with nested elements, which may not accurately represent real-world scenarios. * The test cases focus on performance, but do not account for factors like memory allocation or garbage collection, which could impact overall system performance. * Alternative approaches, such as using CSS selectors or other libraries (e.g., jQuery), are not being tested in this benchmark. **Alternative Alternatives** Other approaches to find elements with specific attributes include: 1. Using `querySelectorAll` and iterating over the result set to find matching elements. 2. Utilizing browser-specific APIs like `Element.matches()` or `DOMTokenList`. 3. Leveraging third-party libraries, such as jQuery, which provides a more comprehensive set of utility methods for working with DOM elements. Keep in mind that these alternatives may introduce additional overhead or complexity, so it's essential to evaluate their performance and suitability for specific use cases.
Related benchmarks
JQuery: find vs selector vs scoped selector - More Html
JQuery DOM Traversal vs JQuery Selectors
addEventListener() vs jQuery.on() with click
Comments
Confirm delete:
Do you really want to delete benchmark?