Benchmark: querySelectorAll vs getElementsByTagName 24

HTML Preparation code:

<div>
<img />
<img />
<img />
<img loading /> 
<img loading /> 
<img loading = "lazy" />
</div>
<div>
<img />
<img />
<img />
<img loading /> 
<img loading /> 
<img loading = "lazy" />
</div>

Tests:

querySelectorAll
document.querySelectorAll('img[loading]').forEach(i => { i.setAttribute('loading', 'eager'); });
getElementsByTagName
[...document.getElementsByTagName('img')].forEach(i => { if (typeof i.loading !== "undefined") i.setAttribute('loading', 'eager'); });
getElementsByTagName ArrayFrom
Array.from(document.getElementsByTagName('img')).forEach(i => { if (typeof i.loading !== "undefined") i.setAttribute('loading', 'eager'); });
getElementsByTagName ForLoop
const imgs = document.getElementsByTagName('img'); for (let i = 0; i < imgs.length; i++) { if (typeof imgs[i].loading !== "undefined") imgs[i].setAttribute('loading', 'eager'); }
getElementsByTagName ArrayFilterForEach
[].filter.call(document.getElementsByTagName('img'), i => i.hasAttribute('loading')).forEach(i => i.setAttribute('loading', 'eager'));
getElementsByTagName ArrayFilterMap
[].filter.call(document.getElementsByTagName('img'), i => i.hasAttribute('loading')).map(i => i.setAttribute('loading', 'eager'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByTagName
getElementsByTagName ArrayFrom
getElementsByTagName ForLoop
getElementsByTagName ArrayFilterForEach
getElementsByTagName ArrayFilterMap

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark defines four different ways to get an array of `<img>` elements from the HTML document:

1. `querySelectorAll`
2. `getElementsByTagName`
3. `getElementsByTagName ArrayFrom`
4. `getElementsByTagName ArrayFilterForEach`

Each test case has a unique implementation that performs some operation on the resulting array, such as setting the `loading` attribute.

**Options Compared**

The benchmark compares four different approaches to get an array of elements:

1. `querySelectorAll`: This method returns all elements matching the specified selector, including those with the `loading` attribute.
2. `getElementsByTagName`: This method returns a live HTMLCollection of elements with the specified tag name (in this case, `<img>`).
3. `getElementsByTagName ArrayFrom`: This approach uses the `Array.from()` method to convert the HTMLCollection to an array.
4. `getElementsByTagName ArrayFilterForEach`: This approach uses the `Array.filter()` and `forEach()` methods to filter and iterate over the elements in the array.

**Pros and Cons**

Here's a brief summary of each approach:

1. **querySelectorAll**: This is the most efficient way to get all matching elements, including those with the `loading` attribute. However, it may be slower than other approaches if there are many elements to match.
	* Pros: Fast, includes attributes, and easy to use.
	* Cons: May be slower for large sets of data.
2. **getElementsByTagName**: This method returns a live HTMLCollection, which can lead to performance issues if the collection is large or changes frequently.
	* Pros: Easy to use, includes attributes.
	* Cons: Can be slow for large collections, may not be suitable for dynamic content.
3. **getElementsByTagName ArrayFrom**: Converting an HTMLCollection to an array using `Array.from()` can introduce additional overhead.
	* Pros: Includes attributes, easy to use.
	* Cons: May add extra overhead due to array conversion.
4. **getElementsByTagName ArrayFilterForEach**: This approach uses additional methods (filter() and forEach()) which may incur more overhead than other approaches.
	* Pros: Easy to understand and implement.
	* Cons: May be slower due to additional method calls.

**Library**

In this benchmark, there is no explicit library mentioned. However, `querySelectorAll` and `getElementsByTagName` are native methods of the DOM API, which are built into most JavaScript engines.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in these benchmarks. They focus on comparing different approaches to get an array of elements from the document.

**Other Alternatives**

If you're looking for alternative approaches to get an array of elements, here are a few:

1. `document.querySelectorAll('[loading]')`: This method returns all elements with the attribute `loading` using the `[loading]` selector.
2. `Array.prototype.map.call(document.getElementsByTagName('img'), function(i) { return i; })`: This approach uses the `map()` method to create a new array from an HTMLCollection.

Keep in mind that these alternatives may have different performance characteristics or use cases, so it's essential to test them thoroughly to determine which one best suits your needs.

Related benchmarks:

querySelectorAll vs getElementsByTagName 24 (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName vs getElementsByTagName ArrayFrom vs getElementsByTagName ForLoop vs getElementsByTagName ArrayFilterForEach vs getElementsByTagName ArrayFilterMap

Created: 6 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByTagName

getElementsByTagName ArrayFrom

getElementsByTagName ForLoop

getElementsByTagName ArrayFilterForEach

getElementsByTagName ArrayFilterMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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