Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.forEach.call vs. Array.from(getElementsByClassName).forEach - remove(
(version: 0)
Comparing performance of:
Array.prototype vs Array.from
Created:
4 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.prototype
Array.from
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=493898" width="100%" height="500px"></iframe>
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 one year ago):
**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:
For each vs some
for vs foreach vs some
jQuery.each() vs Array.prototype.forEach() 2
for vs foreach vs for..of
array.from.map vs array.from with map
Comments
Confirm delete:
Do you really want to delete benchmark?