Benchmark: querySelector vs querySelector + cache

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 = {};

    function $(selector) {
        if (cache[selector] !== undefined) {
            console.count("cached");
            return cache[selector];
        }

        const cached = document.querySelector(selector);
        cache[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
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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
querySelector	630071.4 Ops/sec
querySelector + cache	28002.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of two approaches to selecting an HTML element using JavaScript: `document.querySelector()` and a custom implementation called `$()`. The goal is to determine which approach is faster.

**Script Preparation Code**

The script preparation code defines a custom function `$()` that wraps around `document.querySelector()`. It introduces caching, where if the same selector is used multiple times, the cached result is returned instead of recalculating it. This approach aims to reduce the number of DOM queries.

```javascript
const cache = {};

function $(selector) {
  if (cache[selector] !== undefined) {
    console.count("cached");
    return cache[selector];
  }

const cached = document.querySelector(selector);
  cache[selector] = cached;
  return cached;
}
```

**Pros of caching**

1. Reduced number of DOM queries: By caching the result, we avoid repeating the same query multiple times.
2. Potential performance improvement: Depending on the usage pattern, caching can lead to faster execution.

**Cons of caching**

1. Memory usage: The cache consumes memory, which might be a concern for large datasets or applications with limited resources.
2. Overhead: Creating and maintaining the cache adds overhead, which could negate any potential benefits.
3. Complexity: Introducing an extra layer of complexity can make debugging and maintenance more challenging.

**Comparison**

The two test cases compare the performance of `document.querySelector()` (without caching) versus the custom implementation with caching (`$()`). The benchmark measures the number of executions per second for each approach.

**Library and Purpose**

In this case, there is no explicit library being used. However, it's worth noting that using a more robust caching mechanism or considering libraries like LRU Cache might improve performance in real-world scenarios.

**Special JS feature or syntax**

There are two special JavaScript features being used:

1. **Template literals**: The `$(selector)` function uses template literals (e.g., `"."`) to create a string from the variable.
2. **Object property access**: The cache object (`cache[selector]`) uses object property access to store and retrieve values.

**Alternatives**

If you need to improve performance in similar scenarios, consider the following alternatives:

1. **Using requestAnimationFrame() or setTimeout()**: Instead of using `document.querySelector()` repeatedly, use these APIs to schedule DOM queries at optimal times.
2. **Using a library like LRU Cache**: Implementing a more advanced caching mechanism can provide better performance and scalability.
3. **Using a virtual DOM library**: Libraries like React or Angular Virtual DOM can optimize the rendering process by reducing unnecessary DOM updates.

Keep in mind that the choice of approach depends on your specific requirements, performance constraints, and use case complexity.

Related benchmarks:

querySelector vs querySelector + cache (version: 0)

Comparing performance of: querySelector vs querySelector + cache

Created: 5 years ago by: Registered User

Jump to the latest result

querySelector

querySelector + cache

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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