Benchmark: Cached querySelector single

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>

Previous results

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

Test name	Executions per second
uncached	2589621.0 Ops/sec
cached	2595682.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

Cached querySelector single (version: 0)

Testing if caching querySelector makes a diference

Comparing performance of: uncached vs cached

Created: 2 years ago by: Guest

Jump to the latest result

uncached

cached

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):