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");

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

querySelector

5.0M/s

querySelector + cache

90K/s

Fastest: querySelector (55.4x faster)

View exact numbers

✓ querySelector: 4,996,746 ops/sec
• querySelector + cache: 90,174 ops/sec

Firefox 6 runs

querySelector

1.1M/s

querySelector + cache

34K/s

Fastest: querySelector (30.8x faster)

View exact numbers

✓ querySelector: 1,058,764 ops/sec
• querySelector + cache: 34,423 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 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

querySelector

630K/s

querySelector + cache

28K/s

View exact numbers

Test name	Executions per second
✓ querySelector	630,071 Ops/sec
querySelector + cache	28,003 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.

querySelector vs querySelector + cache (version: 0)

Comparing performance of: `querySelector vs querySelector + cache`

Created: 6 years ago by: Registered User

Go to the latest result

querySelector

querySelector + cache

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelector vs querySelector + cache (version: 0)

Comparing performance of: querySelector vs querySelector + cache

Created: 6 years ago by: Registered User

Go to the latest result

querySelector

querySelector + cache

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelector vs querySelector + cache`