Benchmark: querySelector vs getElementsByTagName simple select

querySelector vs getElementsByTagName simple select (version: 0)

Check if an element specified by a tag exists. The target element must be the first one.

Comparing performance of: `querySelector for existing element vs getElementsByTagName for existing element vs querySelector for none existing element vs getElementsByTagName for none existing element`

Created: one year ago by: Guest

Go to the latest result

HTML Preparation code:

<div>
  <test><test2></test2></test>
  <test><test2><test3></test3></test2></test>
  <test></test>
</div>

Tests:

querySelector for existing element
const found = document.querySelector('div');
getElementsByTagName for existing element
const found = document.getElementsByTagName('div');
querySelector for none existing element
const found = document.querySelector('span');
getElementsByTagName for none existing element
const found = document.getElementsByTagName('span');

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

getElementsByTagName for existing element

24.3M/s

getElementsByTagName for none existing element

23.9M/s

querySelector for none existing element

12.0M/s

querySelector for existing element

11.7M/s

Fastest: getElementsByTagName for existing element (2.1x faster)

View exact numbers

✓ getElementsByTagName for existing element: 24,316,576 ops/sec
• getElementsByTagName for none existing element: 23,931,822 ops/sec
• querySelector for none existing element: 11,976,880 ops/sec
• querySelector for existing element: 11,650,139 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 for existing element
getElementsByTagName for existing element
querySelector for none existing element
getElementsByTagName for none existing element

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

getElementsByTagName for none existing element

33.6M/s

getElementsByTagName for existing element

31.1M/s

querySelector for none existing element

19.4M/s

querySelector for existing element

18.8M/s

View exact numbers

Test name	Executions per second
✓ getElementsByTagName for none existing element	33,616,616 Ops/sec
getElementsByTagName for existing element	31,130,122 Ops/sec
querySelector for none existing element	19,398,800 Ops/sec
querySelector for existing element	18,810,404 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript methods is crucial in understanding the execution speed and optimization of code.

**What's being tested?**

The provided benchmark tests the performance difference between two DOM querying methods:

1. `querySelector`: A method used to select an element by its tag name, class name, or ID.
2. `getElementsByTagName`: A method used to retrieve a collection of elements with a specified tag name.

The test cases cover three scenarios:

* Existing element: The element exists in the HTML structure, and we're checking if it's selected correctly.
* None existing element: The element does not exist in the HTML structure, and we want to see which method returns an empty result faster.

**Options compared**

In this case, only two methods are being tested:

1. `querySelector`
2. `getElementsByTagName`

**Pros and cons of each approach**

**`querySelector`**

Pros:

* Generally faster than `getElementsByTagName`, especially for simple selectors.
* More versatile, as it allows using class names or IDs along with tag names.

Cons:

* Can be slower when dealing with complex or deep structures, as the browser needs to traverse more nodes to find the target element.
* May throw errors if the selector is invalid or returns an empty result (e.g., `null`).

**`getElementsByTagName`**

Pros:

* Faster for simple selectors and large numbers of elements in a collection.
* More reliable when dealing with complex structures, as it always returns all matching elements.

Cons:

* Less versatile than `querySelector`, as it only supports tag names.
* Can be slower due to the overhead of traversing through the DOM tree.

**Library usage**

The test cases use no external libraries.

**Special JS feature or syntax**

This benchmark doesn't rely on any special JavaScript features or syntax. It's a straightforward comparison between two built-in methods.

**Other alternatives**

If `querySelector` and `getElementsByTagName` aren't sufficient, alternative approaches might include:

* Using CSS selectors: This can provide more flexibility but may come with additional overhead.
* Implementing custom query functions: Depending on the specific use case, writing a custom query function using recursion or iteration could be faster or more efficient.

For example, you could implement a custom `querySelector`-like function that uses a binary search approach to find the target element. However, this would likely introduce additional complexity and may not always outperform the native methods.

In summary, measuring the performance difference between `querySelector` and `getElementsByTagName` provides valuable insights into the execution speed of these two DOM querying methods. By understanding their pros and cons, developers can make informed decisions about when to use each method in their codebase.

querySelector vs getElementsByTagName simple select (version: 0)

Check if an element specified by a tag exists. The target element must be the first one.

Comparing performance of: querySelector for existing element vs getElementsByTagName for existing element vs querySelector for none existing element vs getElementsByTagName for none existing element

Created: one year ago by: Guest

Go to the latest result

querySelector for existing element

getElementsByTagName for existing element

querySelector for none existing element

getElementsByTagName for none existing element

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 for existing element vs getElementsByTagName for existing element vs querySelector for none existing element vs getElementsByTagName for none existing element`