Benchmark: querySelectorAll vs getElementsByTagName specific use case 2

HTML Preparation code:

<body>
  <div>
    <script nonce data-something="test"></script>
    <script nonce data-something="test"></script>
    <script nonce data-something="test"></script>
    <script nonce></script>
    <script nonce></script>
    <script nonce></script>
    <div>
      <script nonce data-something="test"></script>
      <script nonce data-something="test"></script>
      <script nonce data-something="test"></script>
      <script nonce></script>
      <script nonce></script>
      <script nonce></script>
    </div>
  </div>
  <script nonce data-something="test"></script>
  <script nonce data-something="test"></script>
  <script nonce data-something="test"></script>
  <script nonce></script>
  <script nonce></script>
  <script nonce></script>
</body>

Tests:

querySelectorAll
var foundScripts = document.querySelectorAll('body>script'); for (s in foundScripts) { if (foundScripts[s].attributes && foundScripts[s].attributes.length == 1 && foundScripts[s].hasAttribute('nonce') && foundScripts[s].text.substring(0, 19) == 'AF_initDataCallback') { console.log(foundScripts[s]); } }
getElementsByTagName
var foundScripts = document.getElementsByTagName('script'); for (s in foundScripts) { if (foundScripts[s].parentElement == document.body && foundScripts[s].hasOwnProperty('attributes') && foundScripts[s].attributes.length == 1 && foundScripts[s].hasAttribute('nonce') && foundScripts[s].text.substring(0, 19) == 'AF_initDataCallback') { console.log(foundScripts[s]); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	156934.5 Ops/sec
getElementsByTagName	46323.8 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of two DOM querying methods: `querySelectorAll` (implemented in JavaScript) and `getElementsByTagName` (also implemented in JavaScript, but using the native browser API). The test case focuses on finding specific `<script>` elements with a certain attribute (`nonce`) within a complex HTML structure.

**Options Compared**

The benchmark compares the performance of two approaches:

1. **querySelectorAll**: This method is used to select all elements that match a specified CSS selector. In this case, it's used to find all `<script>` elements inside the `body` element that have the attribute `nonce` and start with a specific string (`AF_initDataCallback`). The `querySelectorAll` method returns a NodeList, which is an array-like object containing all matching elements.
2. **getElementsByTagName**: This method is used to get an HTML collection of all elements with a specified tag name (in this case, `<script>`). It then filters the result to find elements that match the specified attribute and substring condition.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **querySelectorAll**:
	+ Pros: Fast, efficient, and widely supported across browsers. It's also flexible and can be used for more complex selection patterns.
	+ Cons: Can be slower than `getElementsByTagName` for very large datasets or when the browser doesn't support it.
* **getElementsByTagName**:
	+ Pros: Can be faster than `querySelectorAll` for very large datasets, as it uses a native API that's optimized for performance. However, it can be slower in some cases due to the additional filtering step.
	+ Cons: Less flexible and less widely supported across browsers compared to `querySelectorAll`.

**Library Usage**

The benchmark doesn't explicitly mention any libraries being used. However, both `querySelectorAll` and `getElementsByTagName` are native browser APIs, which means they're built into the browser itself.

**Special JS Features/Syntax**

There isn't any special JavaScript feature or syntax being tested in this benchmark. Both approaches use standard JavaScript methods to query the DOM.

**Other Alternatives**

If you're looking for alternative ways to compare the performance of different DOM querying methods, here are a few options:

1. **V8 Perf**: This is Google's JavaScript engine used by Chrome and Node.js. You can use V8 Perf to benchmark your own custom DOM querying methods.
2. **Benchmarking libraries**: There are several third-party benchmarking libraries available for JavaScript, such as Benchmark.js or jsbench.
3. **Browser-specific APIs**: Some browsers offer their own API for benchmarking and performance analysis, such as Firefox's `performance.now()` function or Chrome's `performance.getEntries()` method.

Keep in mind that these alternatives might require more setup and configuration compared to using the built-in browser APIs and BenchmarkThat.net.

Related benchmarks:

querySelectorAll vs getElementsByTagName specific use case 2 (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 5 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByTagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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