Benchmark: Array.from vs Array.slice (2)

Script Preparation code:

window._elements = Array.from(document.all);

Tests:

Array.from
const arrFrom = Array.from(window._elements);
Array.slice
const arrSlice = window._elements.slice();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array.slice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Windows

View result in a separate tab

Array.slice

5.6M/s

Array.from

1.5M/s

View exact numbers

Test name	Executions per second
✓ Array.slice	5,579,292 Ops/sec
Array.from	1,517,885 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark definition is in JSON format, which defines two test cases:

1. **Array.from vs Array.slice (2)**: This is the name of the benchmark, indicating that it compares the performance of `Array.from` and `Array.slice` methods.
2. **Script Preparation Code**: The script preparation code `window._elements = Array.from(document.all);` initializes an array containing all elements from the HTML document. This line creates a large dataset to be used for testing both `Array.from` and `Array.slice`.
3. **Html Preparation Code**: There is no HTML preparation code provided, which means that the benchmark uses a pre-existing HTML structure.

**Individual Test Cases**

The benchmark consists of two individual test cases:

1. **Array.from**: This test case creates an array using `Array.from(window._elements)`, which iterates over the elements initialized in the script preparation code.
2. **Array.slice**: This test case creates an array by slicing the elements from the same initialized array using `window._elements.slice()`. The `slice()` method returns a shallow copy of a portion of an array.

**What's being tested**

The benchmark is testing the performance difference between two methods for creating arrays from existing data:

* **Array.from**: This method creates a new array by iterating over elements from an existing iterable (in this case, `window._elements`).
* **Array.slice**: This method creates a shallow copy of a portion of an array.

**Options compared**

The benchmark is comparing the performance of these two methods in terms of:

* **Creation time**: How long it takes to create the arrays.
* **Memory usage**: The amount of memory allocated for the resulting arrays.

**Pros and Cons of each approach:**

1. **Array.from**:
	* Pros:
		+ More explicit and readable code.
		+ Can handle more complex iterable sources (e.g., promises, streams).
	* Cons:
		+ May be slower due to the iteration overhead.
2. **Array.slice**:
	* Pros:
		+ Often faster than `Array.from` due to the lack of iteration overhead.
		+ Creates a shallow copy of the array, which can be beneficial in some cases (e.g., when working with arrays as objects).
	* Cons:
		+ Less readable code compared to `Array.from`.
		+ May not handle complex iterable sources.

**Library usage**

The benchmark uses the **`Array.prototype.slice()` method**, which is a built-in JavaScript method that creates a shallow copy of an array.

**Special JS feature or syntax**

There are no specific special features or syntaxes mentioned in this benchmark. The code uses standard JavaScript methods and practices.

**Other alternatives**

Some alternative approaches to creating arrays from existing data include:

* **Array.from()` with other iterable sources (e.g., promises, streams)
* **Array.prototype.map()` with a callback function
* **Native array methods like `concat()` or `push()`
* **Third-party libraries or frameworks' array creation APIs**

Array.from vs Array.slice (2) (version: 0)

Comparing performance of: `Array.from vs Array.slice`

Created: 2 years ago by: Guest

Go to the latest result

Array.from

Array.slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.from vs Array.slice (2) (version: 0)

Comparing performance of: Array.from vs Array.slice

Created: 2 years ago by: Guest

Go to the latest result

Array.from

Array.slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.from vs Array.slice`