Benchmark: querySelectorAll foreach vs getElementsByClassName [].forEach.call() 2

HTML Preparation code:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Tests:

querySelectorAll foreach
var test = document.querySelectorAll(".test"); test.forEach(el => { var t = el; });
getElementsByClassName [].forEach.call()
var test = document.getElementsByClassName("test"); [].forEach.call(test, el => { var t = el; });
Array.prototype
var test = document.getElementsByClassName("test"); Array.prototype.forEach.call(test, el => { var t = el; });
Array.from
var test = document.querySelectorAll(".test"); Array.from(test).forEach(el => { var t = el; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll foreach
getElementsByClassName [].forEach.call()
Array.prototype
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 129 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll foreach	478960.8 Ops/sec
getElementsByClassName [].forEach.call()	648026.6 Ops/sec
Array.prototype	596275.3 Ops/sec
Array.from	338231.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark and its various approaches.

**Benchmark Overview**

The benchmark, named "querySelectorAll foreach vs getElementsByClassName [].forEach.call()", compares four different approaches to iterate over an array of HTML elements retrieved using `document.querySelectorAll` or `document.getElementsByClassName`. The goal is to measure which approach is faster on a mobile device running Chrome.

**Approach 1: `querySelectorAll` with `forEach`**

This approach uses the `querySelectorAll` method to retrieve an array of HTML elements matching the specified CSS selector, and then iterates over the array using the `forEach` method. The code is as follows:
```javascript
var test = document.querySelectorAll(".test");
test.forEach(el => {
  var t = el;
});
```
**Pros:**

* Simple and straightforward implementation.
* No additional libraries or syntax modifications needed.

**Cons:**

* May require more iterations to execute, potentially leading to slower performance compared to other approaches.
* May not be as efficient if the `querySelectorAll` method returns a large number of elements.

**Approach 2: `getElementsByClassName` with `.forEach.call()`**

This approach uses the `getElementsByClassName` method to retrieve an array of HTML elements matching the specified class name, and then iterates over the array using the `.forEach.call()` method. The code is as follows:
```javascript
var test = document.getElementsByClassName("test");
[].forEach.call(test, el => {
  var t = el;
});
```
**Pros:**

* This approach is often considered more efficient than `querySelectorAll` because it uses a single method call and doesn't require additional iteration.
* The `.forEach.call()` method allows for the use of an arrow function, which can be beneficial in terms of performance.

**Cons:**

* Requires the use of the `.call()` method to pass the array and callback function to `forEach`.
* May not be as intuitive or readable as other approaches.

**Approach 3: `Array.prototype.forEach.call()`**

This approach uses the `Array.prototype.forEach` method, which is a standard JavaScript method for iterating over arrays. The code is as follows:
```javascript
var test = document.getElementsByClassName("test");
Array.prototype.forEach.call(test, el => {
  var t = el;
});
```
**Pros:**

* Standard JavaScript implementation that doesn't require additional libraries or syntax modifications.
* Fast and efficient iteration.

**Cons:**

* May not be immediately apparent to developers without experience with `Array.prototype`.

**Approach 4: `Array.from()` with `forEach`**

This approach uses the `Array.from()` method, which creates a new array from an iterable object (in this case, the result of `querySelectorAll`). The code is as follows:
```javascript
var test = document.querySelectorAll(".test");
Array.from(test).forEach(el => {
  var t = el;
});
```
**Pros:**

* Creates a new array that can be iterated over using standard JavaScript methods.
* Can be more readable than other approaches.

**Cons:**

* Requires the use of `Array.from()`, which may not be familiar to all developers.
* May create a new array, potentially consuming additional memory.

**Library and Syntax Considerations**

The benchmark uses the following libraries:

* None (standard JavaScript only)

There are no special JS features or syntax used in this benchmark. The approaches are designed to demonstrate different iteration patterns using standard JavaScript methods.

**Alternatives**

If you're looking for alternative approaches, here are a few options:

* Use `document.querySelectorAll` with a filter function: `var test = document.querySelectorAll(".test").filter(el => el.textContent !== '').forEach(el => { var t = el; });`
* Use a library like Lodash to perform iteration: `const _ = require('lodash'); var test = _.map(document.querySelectorAll('.test'), el => ({ el, textContent: el.textContent })); test.forEach(item => console.log(item.el.textContent));`
* Use a framework like React or Angular for rendering and updating the DOM.

Note that these alternatives may introduce additional dependencies, complexity, or performance overhead, so it's essential to carefully evaluate their suitability for your specific use case.

Related benchmarks:

querySelectorAll foreach vs getElementsByClassName [].forEach.call() 2 (version: 0)

Comparing performance of: querySelectorAll foreach vs getElementsByClassName [].forEach.call() vs Array.prototype vs Array.from

Created: 4 years ago by: Guest

Jump to the latest result

querySelectorAll foreach

getElementsByClassName [].forEach.call()

Array.prototype

Array.from

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