Benchmark: querySelector by attribute (partial matching) VS getElementById VS getElementsByTagName

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

querySelector by attribute (partial matching) VS getElementById VS getElementsByTagName

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

Created: 6 years ago by: Guest

Jump to the latest result

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_two = document.getElementById("vid");
getElementsByTagName
var test_three = document.getElementsByTagName("video")[0];

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
getElementsByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
querySelector by attribute (partial matching)	3199106.0 Ops/sec
querySelector by attribute (partial matching) - variant (starts with)	3739891.8 Ops/sec
getElementById	25627976.0 Ops/sec
getElementsByTagName	9649841.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark measures the performance of three DOM query methods: `querySelector by attribute (partial matching)`, `getElementById`, and `getElementsByTagName`. The tests are run on a sample HTML document containing a single `<video>` element with an ID "vid".

**Query Methods Comparison**

1. **`querySelector by attribute (partial matching)`**: This method allows partial matching of the attribute value. In this case, the test queries elements with an attribute starting with `blob:http`.
	* Pros: Fast and efficient, as it only needs to check the first few characters of the attribute value.
	* Cons: May not find exact matches if the attribute value is longer than the search prefix.
2. **`getElementById`**: This method retrieves an element by its ID.
	* Pros: Unambiguous and reliable, as it always returns the exact element with the specified ID.
	* Cons: May be slower due to the need to traverse the DOM tree to find the element.
3. **`getElementsByTagName`**: This method retrieves a list of elements that match a specific tag name.
	* Pros: Allows for flexible searching, as it can return multiple elements.
	* Cons: May be slower due to the need to iterate through all matching elements.

**Benchmark Preparation**

The benchmark uses a sample HTML document with a single `<video>` element having an ID "vid". The `Html Preparation Code` section is used to create this sample document.

**Library and Special JS Features**

None of the test cases use any external libraries or special JavaScript features beyond what is required for basic DOM manipulation.

**Test Case Variants**

The second variant, `"querySelector by attribute (partial matching) - variant (starts with)"`, modifies the search prefix from `*` to `^`. This change affects how the query method behaves:
	* With `*`, the method performs a partial match on any characters in the attribute value.
	* With `^`, the method only matches when the attribute value starts with the specified prefix.

**Other Alternatives**

If not using these three DOM query methods, alternative approaches could include:

1. Using CSS selectors: The `querySelector by attribute` method can be replaced or augmented with CSS selector syntax to perform more complex searches.
2. Manual DOM traversal: Instead of using one of the above methods, developers could manually traverse the DOM tree to find matching elements.
3. Using a library like jQuery: While not shown in this benchmark, libraries like jQuery provide additional query methods and convenience functions for working with the DOM.

In summary, the benchmark compares three common DOM query methods: `querySelector by attribute (partial matching)`, `getElementById`, and `getElementsByTagName`. Each method has its strengths and weaknesses, and understanding these trade-offs is essential for optimizing web application performance.

Related benchmarks: