Benchmark: Mapping arrayike

HTML Preparation code:

<div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div><div>hello></div>

Script Preparation code:

let o = document.getElementsByTagName('div')
function map(o) {
return o.textContent}

Tests:

Array.from
Array.from(o,map)
.map.call
[].map.call(o,map)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
.map.call

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 26 days ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
Array.from	52013.9 Ops/sec
.map.call	61443.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark called "Mapping arrayike" evaluates the performance of two different approaches to process elements that can be treated like arrays (known as "array-like" objects) in JavaScript. In this case, the array-like object is a collection of `<div>` elements retrieved from the DOM.

#### Script Preparation Code

```javascript
let o = document.getElementsByTagName('div');
function map(o) {
    return o.textContent;
}
```

This code snippet retrieves all `<div>` elements in the document and defines a `map` function that extracts the text content from each `<div>`. The `o` variable is a live HTMLCollection, which is an array-like object.

#### HTML Preparation Code

The provided HTML creates multiple `<div>` elements, each containing the same text "hello", allowing the performance of mapping functions to be tested over a consistent dataset.

### Test Cases and Their Comparisons

The benchmark compares the following two test cases:

1. **Array.from(o,map)**
   - **Description**: This method creates a new array from the array-like object `o`, applying the `map` function to each element.
   - **Pros**:
     - Clear syntax: `Array.from` is specifically designed for converting iterable and array-like objects into arrays, and applying a mapping function at the same time is straightforward.
     - More robust: It handles the mapping function and array conversion in one clean step.
   - **Cons**:
     - Potentially slower in some contexts due to additional overhead of creating a new array from the iterable.

2. **[].map.call(o,map)**
   - **Description**: This method uses `Array.prototype.map` on the array-like object `o` by borrowing the `map` method through `call`. It calls `map` with the context of `o` while applying the `map` function.
   - **Pros**:
     - Flexible: It allows you to invoke `map` on any array-like object, leveraging the existing array methods without needing to create a new array instance first.
   - **Cons**:
     - Less intuitive: The syntax may be less clear, especially for developers who are not familiar with `call` or the concept of borrowing methods in JavaScript.
     - More complex: It imposes additional cognitive load to understand how `call` modifies the context.

### Benchmark Results

The results of the benchmark ran in the Chrome 132 browser show the following performance metrics:

- **Executions per Second for `.map.call`**: 61,443.92
- **Executions per Second for `Array.from`**: 52,013.94

This indicates that the `.map.call` approach was substantially faster than `Array.from` in this particular test.

### Additional Considerations

- **Performance Context**: Performance can vary based on the size of the dataset and the specifics of the JavaScript engine in the browser being used. While these results show one approach being faster, in different scenarios, or with larger datasets, the performance may shift.
  
- **Browser Compatibility**: Both methods are widely supported in modern browsers, but if you need very high-performance scenarios in older environments, profiling and testing are crucial.

### Alternative Approaches

- **For Loops**: A traditional `for` loop can be used to iterate through the elements. While this approach generally provides good performance, it lacks the expressiveness and convenience of built-in array methods.
  
- **Array.prototype.slice**: You can convert the HTMLCollection to an array by using `Array.prototype.slice.call(o)` before applying the `map`. This is an older method and may be less readable.

- **Spread Operator**: If ES6 syntax can be used, `const arr = [...o].map(...)` is another alternative. It is concise and modern but could be slightly slower due to the creation of a new array.

In conclusion, developers should select the mapping technique based on performance needs, clarity, and maintainability while considering the specific context of their application and target environments.

Related benchmarks:

Mapping arrayike (version: 1)

Comparing performance of: Array.from vs .map.call

Created: 26 days ago by: Guest

Jump to the latest result

Array.from

.map.call

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):