Benchmark: querySelector by attribute (partial matching) VS getElementById

HTML Preparation code:

<video id="vid" src="blob:https://example.com/file.mp4"></video>

Tests:

querySelector by attribute (partial matching)
var test_one = document.querySelector("video[src*='blob:http']");
querySelector by attribute (partial matching) - variant (starts with)
var test_one_variant = document.querySelector("video[src^='blob:http']");
getElementById
var test_three = document.getElementById("vid");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector by attribute (partial matching)
querySelector by attribute (partial matching) - variant (starts with)
getElementById

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Chrome 76 on Windows

View result in a separate tab

Test name	Executions per second
querySelector by attribute (partial matching)	1216771.5 Ops/sec
querySelector by attribute (partial matching) - variant (starts with)	1245091.0 Ops/sec
getElementById	2627920.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test on MeasureThat.net. The benchmark compares the performance of two approaches: `querySelector` with partial matching and `getElementById`. This analysis will help explain what is being tested, the pros and cons of each approach, and provide context for users.

**QuerySelector vs getElementById**

The test aims to measure the performance difference between these two methods:

1. **querySelector**: A method that searches for an element within a document based on a selector string. It can use various selectors, such as CSS selectors or attribute matching.
2. **getElementById**: A method that retrieves an HTML element by its ID.

**Options Compared**

The benchmark compares three variants of `querySelector`:

* `querySelector` with partial matching: searches for elements with attributes containing the specified value (e.g., `video[src*='blob:http']`).
* `querySelector` variant with starts-with attribute matching: searches for elements with attributes starting with the specified value (e.g., `video[src^='blob:http']`).

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **querySelector**: Pros:
	+ Can be more efficient than `getElementById` since it only looks at elements that match the selector.
	+ Can use various selectors, making it more flexible.
Cons:
	+ May have performance issues if the document is very large or complex.
	+ Can be slower if the browser has to parse and execute multiple CSS rules.
* **getElementById**: Pros:
	+ Typically faster than `querySelector` since it only looks up a single ID value.
	+ More straightforward and predictable performance characteristics.
Cons:
	+ Less flexible than `querySelector`, as it's limited to IDs.
	+ May have additional overhead due to the need to parse and execute multiple CSS rules.

**Library: None**

There is no external library being used in this benchmark. The tests only rely on built-in JavaScript methods and HTML elements.

**Special JS Feature/Syntax**

The test uses a feature called "partial matching" with `querySelector`. This allows for searching for elements with attributes containing a specified value (in this case, `blob:http`).

**Benchmark Preparation Code**

The benchmark preparation code is as follows:
```javascript
var test_one = document.querySelector("video[src*='blob:http']");
var test_one_variant = document.querySelector("video[src^='blob:http']");
var test_three = document.getElementById("vid");
```
This code creates three variables, each using the respective method to retrieve an element from the HTML document.

**Latest Benchmark Results**

The latest benchmark results are:

| Test Name | Browser | Device Platform | Operating System | Executions Per Second |
| --- | --- | --- | --- | --- |
| getElementById | Chrome 76 | Desktop | Windows | 2627920.25 |
| querySelector by attribute (partial matching) - variant (starts with) | Chrome 76 | Desktop | Windows | 1245091.0 |
| querySelector by attribute (partial matching) | Chrome 76 | Desktop | Windows | 1216771.5 |

These results indicate that `getElementById` is the fastest approach, followed closely by `querySelector` with partial matching and starts-with attribute matching.

**Other Alternatives**

For users interested in exploring alternative approaches, here are a few options:

* Using other methods for element retrieval, such as `getElementsByTagName`, `getElementsByClassName`, or `querySelectorAll`.
* Investigating the performance impact of using CSS classes or pseudo-classes with query selectors.
* Examining the performance characteristics of different JavaScript engines or browsers.

Related benchmarks:

querySelector by attribute (partial matching) VS getElementById (version: 0)

querySelector by attribute (partial matching) VS getElementById

Comparing performance of: querySelector by attribute (partial matching) vs querySelector by attribute (partial matching) - variant (starts with) vs getElementById

Created: 5 years ago by: Guest

Jump to the latest result

querySelector by attribute (partial matching)

querySelector by attribute (partial matching) - variant (starts with)

getElementById

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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