Benchmark: comparison between caching element and use selector

HTML Preparation code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <header>
    <div class="title">
<h1 class="find-me">Hello ali safari</h1>
    </div>
  </header>
</body>
</html>

Script Preparation code:

const cache = {};
    function $(selector) {
        if (cache[selector] !== undefined) {
            return cache[selector];
        }

        const cached = document.querySelector(selector);
        cache[selector] = cached;
        return cached
    };

Tests:

test with cache
for(let i = 0; i < 1000; i++){ $("h1.find-me") }
test with query selector
for(let i = 0; i < 1000; i++){ document.querySelector("h1.find-me") }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test with cache
test with query selector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
test with cache	2001125.4 Ops/sec
test with query selector	11610.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents two benchmark test cases for measuring the performance difference between using caching elements and using CSS selectors in JavaScript.

**Cache vs Query Selector Approach**

There are two approaches being compared:

1. **Caching Elements**: This approach involves creating a cache object to store the result of the first execution, so that subsequent executions can retrieve the cached value instead of re-executing the query.
2. **Query Selector**: This approach uses the `document.querySelector()` method to find an element by its CSS selector.

**Pros and Cons**

* **Caching Elements**:
	+ Pros: Can potentially reduce the number of DOM queries, which can improve performance.
	+ Cons: Requires more memory to store the cache object, and may not work well for dynamically changing content or short-lived elements.
* **Query Selector**:
	+ Pros: Is a built-in method in JavaScript and doesn't require additional memory storage. Also, it's less prone to issues with dynamic content changes.
	+ Cons: Can be slower due to the overhead of re-executing the query on each iteration.

**Library Used**

In this benchmark, `document.querySelector()` is used as the library, which is a built-in JavaScript method for finding elements by CSS selectors. This library is widely supported across different browsers and platforms.

**Special JS Features/Syntax**

None are mentioned in the provided JSON.

**Other Alternatives**

If you need to improve performance when working with DOM queries, you might consider using other approaches such as:

1. **Use requestAnimationFrame()**: Instead of executing a function on every iteration, use `requestAnimationFrame()` to schedule the execution for the next animation frame.
2. **Use Web Workers**: If you're dealing with complex computations or heavy DOM manipulation, consider using Web Workers to offload tasks from the main thread and improve responsiveness.

Keep in mind that these alternatives may have additional requirements, such as setting up a separate thread or handling shared resources between workers.

**Benchmark Preparation Code**

The provided `Script Preparation Code` creates a cache object to store the result of the first execution:
```javascript
const cache = {};
function $(selector) {
  if (cache[selector] !== undefined) {
    return cache[selector];
  }
  const cached = document.querySelector(selector);
  cache[selector] = cached;
  return cached;
};
```
The `Html Preparation Code` sets up a basic HTML structure with an element containing the CSS selector `"h1.find-me"`:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <header>
    <div class="title">
      <h1 class="find-me">Hello ali safari</h1>
    </div>
  </header>
</body>
</html>
```

Related benchmarks:

comparison between caching element and use selector (version: 0)

simply just find an element

Comparing performance of: test with cache vs test with query selector

Created: 3 years ago by: Guest

Jump to the latest result

test with cache

test with query selector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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