Benchmark: Mr. CC - selector benchmark

HTML Preparation code:

<div id="a"></div>
<div class="a"></div>
<div data-a=""></div>

Tests:

ID - getElementById
i = 0 while(i++ < 1000) { document.getElementById('test') }
ID- querySelector
i = 0 while(i++ < 1000) { document.querySelector('#test') }
class - querySelector
i = 0 while(i++ < 1000) { document.querySelector('.test') }
data attr - querySelector
i = 0 while(i++ < 1000) { document.querySelector('[data-test]') }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID - getElementById
ID- querySelector
class - querySelector
data attr - querySelector

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript selector-based DOM queries is an essential task in web development, and MeasureThat.net provides a useful platform for benchmarking various approaches.

**What are we testing?**

In this specific benchmark, we're measuring the performance of four different JavaScript methods for retrieving elements from the Document Object Model (DOM):

1. `document.getElementById('test')`
2. `document.querySelector('#test')`
3. `document.querySelector('.test')`
4. `document.querySelector('[data-test]')`

Each test case uses a simple loop to retrieve an element 1000 times, and we're interested in measuring the execution time of each method.

**Options compared**

We have four options being compared:

1. **ID-based query**: Using `document.getElementById('test')`
2. **Class-based query with ID prefix**: Using `document.querySelector('#test')` (note that some browsers may not support this, as it's not a standard syntax)
3. **Class-based query without ID prefix**: Using `document.querySelector('.test')`
4. **Attribute-based query**: Using `document.querySelector('[data-test]')`

**Pros and Cons of each approach:**

1. **ID-based query**: Fastest method, as it uses a direct reference to the element. However, it may not work if the ID is dynamic or not present in the DOM.
2. **Class-based query with ID prefix**: May be faster than class-based queries without an ID prefix, but its browser support is limited.
3. **Class-based query without ID prefix**: Can be slower than ID-based queries due to the additional lookup time for classes. However, it's more flexible and can handle dynamic classes.
4. **Attribute-based query**: Slowest method, as it requires checking multiple attributes (in this case, `data-test`). This approach is also less flexible and may not work if the attribute is dynamically generated.

**Library usage**

None of the test cases use any external libraries.

**Special JS features or syntax**

None mentioned in the provided benchmark definition. However, some modern JavaScript features like ES6 classes or async/await might be used in more complex benchmarks.

**Other alternatives**

For a more comprehensive benchmark, you could consider testing other DOM query methods, such as:

* Using `document.querySelectorAll()` to retrieve multiple elements at once
* Using `document.createTreeWalker()` for more control over the selection process
* Using CSS selectors with attribute matching (e.g., `[data-test]`) instead of a custom attribute

Keep in mind that these alternatives might not be directly relevant to this specific benchmark, but they could provide valuable insights into other aspects of DOM query performance.

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/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
ID - getElementById	7691.9 Ops/sec
ID- querySelector	2938.9 Ops/sec
class - querySelector	4675.9 Ops/sec
data attr - querySelector	2506.7 Ops/sec

Related benchmarks:

Mr. CC - selector benchmark (version: 0)

Comparing performance of: ID - getElementById vs ID- querySelector vs class - querySelector vs data attr - querySelector

Created: one year ago by: Guest

Jump to the latest result

ID - getElementById

ID- querySelector

class - querySelector

data attr - querySelector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):