Benchmark: querySelectorAll vs getElementsByTagName 23

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll('img[loading]').forEach(i => { i.setAttribute('loading', 'eager'); });
getElementsByTagName
[...document.getElementsByTagName('img')].forEach(i => { if (i.hasAttribute('loading')) i.setAttribute('loading', 'eager'); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByTagName

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

I'll do my best to help with this complex benchmarking output.

**Benchmark Results**

There are two benchmark results in the output:

1. `querySelectorAll`
2. `getElementsByTagName`

Both tests have been executed multiple times, and their results are stored in an array. Let's extract some information from each result:

**querySelectorAll Result**

* Browser: Chrome 114
* Device Platform: Desktop
* Operating System: Windows
* Executions Per Second (EPS): 6008.32861328125

This result indicates that the `querySelectorAll` test executed at a rate of approximately 6,008 times per second on a Chrome 114 browser running on a desktop device with Windows operating system.

**getElementsByTagName Result**

* Browser: Chrome 114
* Device Platform: Desktop
* Operating System: Windows
* Executions Per Second (EPS): 3854.82470703125

This result indicates that the `getElementsByTagName` test executed at a rate of approximately 3,854 times per second on a Chrome 114 browser running on a desktop device with Windows operating system.

**Key Insights**

Based on these results, we can infer some key insights:

* Both tests are executed at relatively high rates.
* The `querySelectorAll` test performs slightly better than the `getElementsByTagName` test.
* Both tests are consistent across multiple executions.

However, without more context or data, it's difficult to draw conclusions about the relative performance of these two methods or identify potential bottlenecks in the code. If you have any further questions or would like me to elaborate on any aspect of the results, please feel free to ask!

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	6008.3 Ops/sec
getElementsByTagName	3854.8 Ops/sec

Related benchmarks:

querySelectorAll vs getElementsByTagName 23 (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 4 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByTagName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):