Run results for: comparison between caching element and use selector

Run details:

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: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

test with cache

1.9M/s

test with query selector

11K/s

View exact numbers

Test name	Executions per second
✓ test with cache	1,949,563 Ops/sec
test with query selector	11,491 Ops/sec

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

Run results for: comparison between caching element and use selector

simply just find an element

test with cache

test with query selector