Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Cached querySelector single
(version: 0)
Testing if caching querySelector makes a diference
Comparing performance of:
uncached vs cached
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="fir" class="hi"> <div id='no' class="ss"> <div id='ff' class="fox"> <button class="target"></button> </div> </div> </div>
Script Preparation code:
var cache = {};
Tests:
uncached
var el = document.querySelector('target');
cached
var el = cache['target']; if (!el) { el = document.querySelector('target'); cache['target'] = el; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
uncached
cached
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; rv:124.0) Gecko/20100101 Firefox/124.0
Browser/OS:
Firefox 124 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=509463" width="100%" height="500px"></iframe>
cached
2.6M/s
uncached
2.6M/s
View exact numbers
Test name
Executions per second
✓
cached
2,595,682 Ops/sec
uncached
2,589,621 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks! The provided JSON represents a benchmark test case on MeasureThat.net, which aims to measure the performance difference between two approaches: caching and non-caching `querySelector` calls. **What is tested?** In this benchmark, two test cases are compared: 1. **Uncached**: This approach uses the default behavior of `document.querySelector`, which retrieves the element from the DOM on each call. 2. **Cached**: This approach uses a simple cache to store the result of the previous query. If the target element is already in the cache, it returns the cached value instead of querying the DOM again. **Options compared** The two approaches are compared in terms of their performance, measured by the number of executions per second (`ExecutionsPerSecond`). **Pros and Cons** * **Uncached**: + Pros: No additional memory allocation or complexity is added to the code. + Cons: Each query can be slower due to the repeated DOM lookup. * **Cached**: + Pros: Reuses previously retrieved elements, reducing the number of DOM lookups. + Cons: Requires an additional data structure (the cache) and some extra logic to manage it. **Library/Functions used** In this benchmark, two functions are used: 1. `document.querySelector`: a built-in JavaScript function that retrieves an element from the DOM based on its CSS selector. 2. `cache` object: a simple key-value store created in the "Script Preparation Code" section of the benchmark definition. **Special JS feature/syntax** In this benchmark, no special JavaScript features or syntax are used beyond the standard DOM queries and caching mechanism. However, it's worth noting that modern browsers may have additional optimizations for `querySelector` calls, such as memoization or caching, which could affect the results of this benchmark. **Other alternatives** For similar benchmarks, you might want to consider other approaches, such as: 1. Using a library like Lodash or Ramda to implement a cached version of `querySelector`. 2. Using a more advanced caching mechanism, such as a JavaScript cache library (e.g., js-cache). 3. Comparing the performance of different query selectors, such as `querySelectorAll` vs. `getElementsByClassName`. Keep in mind that the specific approach and libraries used will depend on the requirements and goals of your benchmark.
Related benchmarks
getElementsByClassName()[0] vs querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?