<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>Array.prototype.forEach.call(document.getElementsByClassName(".test"), function (el) { el.remove() })Array.from(document.getElementsByClassName(".test")).forEach(function (el) { el.remove() })--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Array.prototype | |
| Array.from |
| Test name | Executions per second |
|---|---|
| Array.prototype | 4479854.0 Ops/sec |
| Array.from | 3143399.0 Ops/sec |
Benchmark Overview
The provided benchmark measures the performance of two approaches to remove elements from an array of HTML elements:
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.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:forEach method on the Array.prototype, which can lead to additional overhead.Array.from(getElementsByClassName).forEach:Array.from) and is generally faster than using forEach on the Array.prototype.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:
for loop: for (var i = 0; i < arr.length; i++) { arr[i].remove(); }splice method: arr.splice(0, arr.length);Note that these alternatives may have different performance characteristics and may not be as suitable for this specific benchmark.
