Benchmark: querySelectorAll vs getElementsByTagName specific use case

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].hasOwnProperty('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: 2 years ago)

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

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	204232.6 Ops/sec
getElementsByTagName	49032.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing different approaches to measure performance. The provided benchmark compares `querySelectorAll` and `getElementsByTagName` methods in specific use cases.

**Test Cases**

There are two individual test cases:

1. **`querySelectorAll`**: This test case uses the `querySelectorAll` method to find all `<script>` elements with a specific attribute (`nonce`) within a nested structure.
2. **`getElementsByTagName`**: This test case uses the `getElementsByTagName` method to find all `<script>` elements within a container element (`<body>`) and then filters them based on the same attribute.

**Comparison of Approaches**

The two approaches differ in their performance characteristics:

*   **`querySelectorAll`**:
    *   Uses a more efficient algorithm that can stop iterating as soon as it finds the desired element.
    *   Can take advantage of browser optimizations like cached lookups and DOM traversal shortcuts.
    *   May have better performance due to its optimized implementation in modern browsers.

*   **`getElementsByTagName`**:
    *   Iterates over all elements in the container element, which can be slower for large datasets.
    *   Requires an additional step to filter results based on the attribute, adding overhead.

**Pros and Cons**

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

*   **`querySelectorAll`**:
    *   Pros: More efficient algorithm, optimized implementation in modern browsers.
    *   Cons: May require more complex code for filtering and handling edge cases.

*   **`getElementsByTagName`**:
    *   Pros: Easier to implement and understand, can be more predictable performance.
    *   Cons: Less efficient algorithm, slower performance due to iterating over elements.

**Library Considerations**

The provided benchmark uses the following library:

*   None. The test code is self-contained and does not rely on external libraries.

**Special JavaScript Features or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what is typically available in modern browsers.

**Other Alternatives**

If you want to explore alternative approaches, here are a few options:

*   **`querySelector`**: This method can be used instead of `querySelectorAll` if the desired elements have a unique identity (e.g., class, id). It's faster and more efficient than `querySelectorAll`.
*   **`getElementsById`**: If you need to retrieve multiple elements with the same ID, this method might be more efficient. However, it can be slower for non-adjacent elements.
*   **Native JavaScript methods**: For specific use cases like filtering or iterating over elements, native JavaScript methods (e.g., `Array.prototype.forEach`) may provide better performance.

Keep in mind that the choice of approach depends on your specific requirements and the characteristics of your data. Experimenting with different approaches can help you determine which method works best for your use case.

Related benchmarks:

querySelectorAll vs getElementsByTagName specific use case (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 2 months ago):