Benchmark: Array.from() vs Array.prototype.map.call() on NodeList

HTML Preparation code:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

Script Preparation code:

var els = document.querySelectorAll('div');

Tests:

Array.from()
Array.from(els, el => el.tagName);
Array.prototype.map.call()
Array.prototype.map.call(els, el => el.tagName);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from()
Array.prototype.map.call()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided JavaScript benchmark.

**Overview**

The benchmark measures the performance difference between two approaches for creating an array from a NodeList: `Array.from()` and `Array.prototype.map.call()`. The tests are designed to compare these two methods on a specific use case, where the input is a NodeList of elements (`els`).

**Benchmark Definition JSON**

The provided `Benchmark Definition` JSON defines the overall benchmark:
```json
{
    "Name": "Array.from() vs Array.prototype.map.call() on NodeList",
    "Description": null,
    "Script Preparation Code": "var els = document.querySelectorAll('div');",
    "Html Preparation Code": "<div>1</div>\r\n<div>2</div>\r\n<div>3</div>\r\n<div>4</div>\r\n<div>5</div>\r\n<div>6</div>\r\n<div>7</div>\r\n<div>8</div>\r\n<div>9</div>"
}
```
The `Script Preparation Code` sets up a variable `els` by selecting all `<div>` elements on the page, and the `Html Preparation Code` creates an HTML document with 9 `<div>` elements.

**Individual Test Cases**

The benchmark consists of two test cases:
```json
[
    {
        "Benchmark Definition": "Array.from(els, el => el.tagName);",
        "Test Name": "Array.from()"
    },
    {
        "Benchmark Definition": "Array.prototype.map.call(els, el => el.tagName);",
        "Test Name": "Array.prototype.map.call()"
    }
]
```
The first test case uses `Array.from()` to create an array from the NodeList `els`, and the second test case uses `Array.prototype.map.call()` with a callback function to achieve the same result.

**Libraries and Functions**

In both tests, the following libraries and functions are used:

* `document`: The Document Object Model (DOM) API for accessing DOM elements.
* `querySelectorAll()`: A method that returns a NodeList containing all matching elements.
* `Array.from()`: A JavaScript method for creating an array from an iterable.
* `Array.prototype.map.call()`: A method that applies the provided callback function to each element in the NodeList, returning an array.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in these tests. The focus is on comparing two well-known methods for achieving a specific result.

**Pros and Cons of Approaches**

Here's a brief summary of the pros and cons of using `Array.from()` versus `Array.prototype.map.call()`:

* **`Array.from()`**:
	+ Pros:
		- More concise and expressive way to create an array from an iterable.
		- Can be more efficient for small arrays.
	+ Cons:
		- May not work as expected if the input is a NodeList with a large number of elements (as seen in this benchmark).
* **`Array.prototype.map.call()`**:
	+ Pros:
		- Works well for larger arrays and NodeLists.
	+ Cons:
		- More verbose and less expressive than `Array.from()`.
		- May be slower due to the overhead of calling a method on an array.

**Other Alternatives**

If you need to create an array from a NodeList, other alternatives include:

* Using `Array.prototype.slice()` or `Array.prototype.splice()` to extract elements from the NodeList and then convert it to an array.
* Utilizing libraries like Lodash's `map` function for NodeLists.

Keep in mind that these alternatives may have different performance characteristics compared to `Array.from()` and `Array.prototype.map.call()`.

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

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from()	186774.9 Ops/sec
Array.prototype.map.call()	230100.6 Ops/sec

Related benchmarks:

Array.from() vs Array.prototype.map.call() on NodeList (version: 0)

Comparing performance of: Array.from() vs Array.prototype.map.call()

Created: 2 years ago by: Guest

Jump to the latest result

Array.from()

Array.prototype.map.call()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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