Benchmark: Array.prototype.forEach.call vs. Array.from(getElementsByClassName).forEach - remove(

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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="test"></div>

Tests:

Array.prototype
Array.prototype.forEach.call(document.getElementsByClassName(".test"), function (el) { el.remove() })
Array.from
Array.from(document.getElementsByClassName(".test")).forEach(function (el) { el.remove() })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype	4479854.0 Ops/sec
Array.from	3143399.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches to remove elements from an array of HTML elements:

1. `Array.prototype.forEach.call`: This method uses the `forEach` method on the `Array.prototype` and calls a callback function for each element in the array.
2. `Array.from(getElementsByClassName).forEach`: This method uses the `getElementsByClassName` method to get an array of HTML elements, converts it to an array using `Array.from`, and then uses the `forEach` method to remove each element from the array.

**Options Compared**

The two options are compared in terms of their execution speed. The benchmark measures the number of executions per second for each option.

**Pros and Cons**

* **`Array.prototype.forEach.call`**:
	+ Pros: This method is a standard part of the JavaScript language and is widely supported.
	+ Cons: It may be slower than other methods because it uses the `forEach` method on the `Array.prototype`, which can lead to additional overhead.
* **`Array.from(getElementsByClassName).forEach`**:
	+ Pros: This method uses a modern array creation method (`Array.from`) and is generally faster than using `forEach` on the `Array.prototype`.
	+ Cons: It relies on the `getElementsByClassName` method, which may not be supported in older browsers or versions of JavaScript.

**Library and Purpose**

The `getElementsByClassName` method is a DOM method that returns an array-like object containing all elements whose class attribute contains the specified value. In this benchmark, it is used to get an array of HTML elements with the class name "test".

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes used in this benchmark.

**Other Alternatives**

Other approaches that could be used to remove elements from an array of HTML elements include:

* Using a `for` loop: `for (var i = 0; i < arr.length; i++) { arr[i].remove(); }`
* Using the `splice` method: `arr.splice(0, arr.length);`
* Using a library like Lodash or Ramda for array manipulation.

Note that these alternatives may have different performance characteristics and may not be as suitable for this specific benchmark.

Related benchmarks:

Array.prototype.forEach.call vs. Array.from(getElementsByClassName).forEach - remove( (version: 0)

Comparing performance of: Array.prototype vs Array.from

Created: 3 years ago by: Registered User

Jump to the latest result

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