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

Jump 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');

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: 25 days 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

Test name	Executions per second
querySelector for existing element	18810404.0 Ops/sec
getElementsByTagName for existing element	31130122.0 Ops/sec
querySelector for none existing element	19398800.0 Ops/sec
getElementsByTagName for none existing element	33616616.0 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.

Related benchmarks: