Benchmark: querySelectorAll vs getElementsByClassName with 1,000,000 children searched

Script Preparation code:

function div() {
	return document.createElement('div');
}

const parent = div();

for (let i = 0; i < 1000; i++) {
  const child = div();
  
	for (let j = 0; j < 1000; j++) {
    const grandChild = div();
    grandChild.classList.add('grandChild');
    child.append(grandChild);
  }
  
  parent.append(child);
}
document.body.append(parent)

let result;

Tests:

querySelectorAll
result = document.querySelectorAll('.grandChild');
getElementsByClassName
result = document.getElementsByClassName('grandChild');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

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 Benchmark Definition JSON and explain what is being tested.

The benchmark measures the performance of two DOM querying methods: `querySelectorAll` and `getElementsByClassName`. These methods are used to retrieve elements from an HTML document based on their class names or CSS selectors.

**What are we comparing?**

We're comparing the execution time of these two methods when searching for elements with a specific class name (`grandChild`) in a deeply nested DOM structure. The benchmark creates a parent element, and for each child element, it creates multiple grandchild elements with the `grandChild` class. This results in a large number of elements to search through, making the benchmark more challenging.

**Options compared:**

1. **`querySelectorAll`**: This method uses CSS selectors to select elements. In this case, it's used to retrieve all elements with the `grandChild` class.
2. **`getElementsByClassName`**: This method returns a collection of elements that have the specified class name.

**Pros and Cons:**

*   `querySelectorAll`:
    *   Pros:
        *   More flexible and powerful than `getElementsByClassName`, as it can be used to select multiple elements using CSS selectors.
        *   Can be faster for large selections, especially if the selector is optimized.
    *   Cons:
        *   May have higher overhead due to the use of CSS selectors and the need to parse them.
*   `getElementsByClassName`:
    *   Pros:
        *   Simpler and more straightforward than `querySelectorAll`.
        *   Can be faster for small selections or when the class name is simple.
    *   Cons:
        *   Less flexible and powerful than `querySelectorAll`, as it can only retrieve elements with a specific class name.

**Library usage:**

In this benchmark, no libraries are explicitly used. However, JavaScript's built-in DOM APIs are utilized to create and manipulate the HTML document.

**Special JS feature or syntax:**

This benchmark does not use any special JavaScript features or syntax. It relies on standard DOM manipulation methods and CSS selectors.

**Other alternatives:**

For comparing the performance of `querySelectorAll` and `getElementsByClassName`, other alternatives could include:

*   Using a library like jQuery, which provides its own version of these methods.
*   Implementing custom logic to retrieve elements based on class names or CSS selectors.
*   Comparing the performance of different parsing techniques for CSS selectors.

Keep in mind that each alternative would require significant modifications to the benchmark and may not accurately represent real-world use cases.

Related benchmarks:

querySelectorAll vs getElementsByClassName with 1,000,000 children searched (version: 0)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 4 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByClassName

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):