Benchmark: querySelectorAll loop test

HTML Preparation code:

<html>
  <head></head>
  <body>
  </body>
</html>

Script Preparation code:

for (let i = 0; i < 1000; i++) {
    document.body.insertAdjacentHTML('afterend', '<div class="serp">Hello World</div>')
}

Tests:

for loop 1
const serps = document.body.querySelectorAll('serp'); for (const serp of serps) { serp.classList.add('terp') }
for loop 2
const serps = document.body.querySelectorAll('serp'); [...serps].forEach(serp => { serp.classList.add('terp') })
for loop 3
const serps = document.body.querySelectorAll('serp'); for (let i = 0; i < serps.length; i++) { serps[i].classList.add('terp') }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop 1
for loop 2
for loop 3

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
for loop 1	1143735.4 Ops/sec
for loop 2	977155.4 Ops/sec
for loop 3	1421210.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark test case that measures the performance of three different approaches for adding a class to an array of elements retrieved using `querySelectorAll`. The test involves creating 1000 elements with the class "serp" and then adding another class "terp" to each element. The benchmark compares the execution time of these three approaches:

1. **For loop**: Using a traditional for loop to iterate over the array of elements.
2. **Array spread syntax**: Using the spread operator (`[...array]`) to create a new array with the desired elements.
3. **ForEach method**: Using the `forEach` method to iterate over the array of elements.

**Options comparison**

The three options are compared in terms of their execution time, which is measured in executions per second (EPS). The test case provides the results for each option:

* For loop 1: 1421210.375 EPS
* For loop 2: 1143735.375 EPS
* For loop 3: 977155.375 EPS

**Pros and Cons**

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

1. **For loop**: This traditional approach is simple and easy to understand, but it can be slow for large arrays due to the overhead of explicit looping.
	* Pros: Simple, easy to implement
	* Cons: Slow for large arrays
2. **Array spread syntax**: Using the spread operator creates a new array with the desired elements, which can lead to slower performance compared to traditional loops.
	* Pros: More concise and modern approach
	* Cons: Creates unnecessary copies of data, can be slower
3. **ForEach method**: The `forEach` method is a built-in method that iterates over an array without creating new arrays or objects. It's often considered the most efficient way to iterate over arrays.
	* Pros: Efficient, modern approach
	* Cons: May not work as expected if the iteration is not necessary

**Library usage**

There is no explicit library mentioned in the provided JSON. However, it's likely that the test case relies on built-in JavaScript features and APIs.

**Special JS feature or syntax**

None of the approaches use any special JavaScript features or syntax beyond standard array methods (e.g., `forEach`, spread operator).

Related benchmarks:

querySelectorAll loop test (version: 0)

Comparing performance of: for loop 1 vs for loop 2 vs for loop 3

Created: 2 years ago by: Guest

Jump to the latest result

for loop 1

for loop 2

for loop 3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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