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

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

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: 7 years ago by: Guest

Go 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];

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Firefox 8 runs

getElementById

7.8M/s

getElementsByTagName

5.1M/s

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

3.4M/s

querySelector by attribute (partial matching)

3.4M/s

Fastest: getElementById (2.3x faster)

View exact numbers

✓ getElementById: 7,784,466 ops/sec
• getElementsByTagName: 5,070,289 ops/sec
• querySelector by attribute (partial matching) - variant (starts with): 3,413,242 ops/sec
• querySelector by attribute (partial matching): 3,352,945 ops/sec

Chrome 6 runs

getElementById

23.4M/s

getElementsByTagName

11.3M/s

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

4.2M/s

querySelector by attribute (partial matching)

4.2M/s

Fastest: getElementById (5.6x faster)

View exact numbers

✓ getElementById: 23,445,652 ops/sec
• getElementsByTagName: 11,260,888 ops/sec
• querySelector by attribute (partial matching) - variant (starts with): 4,173,306 ops/sec
• querySelector by attribute (partial matching): 4,153,218 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months 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

getElementById

25.6M/s

getElementsByTagName

9.6M/s

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

3.7M/s

querySelector by attribute (partial matching)

3.2M/s

View exact numbers

Test name	Executions per second
✓ getElementById	25,627,976 Ops/sec
getElementsByTagName	9,649,841 Ops/sec
querySelector by attribute (partial matching) - variant (starts with)	3,739,892 Ops/sec
querySelector by attribute (partial matching)	3,199,106 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.

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

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: 7 years ago by: Guest

Go to the latest result

querySelector by attribute (partial matching)

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

getElementById

getElementsByTagName

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Firefox 8 runs

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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