Benchmark: querySelector vs querySelector + cache using Map2

HTML Preparation code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="about-shop">Hello azula</h1>
</body>
</html>

Script Preparation code:

const cache = new Map();

    function $(selector) {
        if (cache.has(selector)) {
            return cache.get(selector);
        }

        let cached = document.querySelector(selector);
        cache.set(selector, cached);
        return cached
    };

Tests:

querySelector
const selector1 = document.querySelector(".about-shop"); const selector2 = document.querySelector(".about-shop"); const selector3 = document.querySelector(".about-shop");
querySelector + cache with Map
const selector1 = $(".about-shop"); const selector2 = $(".about-shop"); const selector3 = $(".about-shop");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelector + cache with Map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Tested Options:**

1. `document.querySelector()`: This is a standard method in JavaScript for selecting an element by its CSS selector.
2. `$(selector)`: This is a custom function that wraps around the `document.querySelector()` method, introducing caching using a `Map` data structure.

**Pros and Cons of Different Approaches:**

* **`document.querySelector()`**:
	+ Pros:
		- No additional memory overhead due to caching.
		- No need to learn or maintain an additional function.
	- Cons:
		- May incur repeated DOM searches, potentially leading to slower performance.
* `$(selector)` with caching using `Map`:
	+ Pros:
		- Caches the result of previous searches, reducing DOM searches and improving performance.
		- Allows for fine-grained control over cache eviction policies.
	- Cons:
		- Introduces additional memory overhead due to the `Map`.
		- Requires learning and maintaining an additional function.

**Library and Purpose:**

* `Map`: A built-in JavaScript data structure that stores key-value pairs. In this case, it's used as a cache to store the results of previous DOM searches.

**Special JS Features or Syntax:**

None mentioned in the provided benchmark definition.

**Other Considerations:**

* **Cache Eviction Policies**: The custom caching mechanism allows for more control over when cache entries are evicted. This can be important if the application needs to adapt to changing conditions, such as network connectivity issues.
* **DOM Search Performance**: The performance impact of repeated DOM searches using `document.querySelector()` may vary depending on the specific use case and requirements.

**Alternatives:**

* Other caching mechanisms, such as a simple array-based cache or a library like LRU Cache.
* Other query selection methods, such as `document.getElementById()`, `document.getElementsByTagName()`, or `QuerySelectorAll()`.
* Alternative JavaScript frameworks or libraries that provide optimized query selection methods.

Related benchmarks:

querySelector vs querySelector + cache using Map2 (version: 1)

Comparing performance of: querySelector vs querySelector + cache with Map

Created: 5 years ago by: Registered User

Jump to the latest result

querySelector

querySelector + cache with Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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