Benchmark: Data transfer v2

Script Preparation code:


const range = (start, stop, step) => Array.from({
    length: (stop - start) / step + 1
}, (_, i) => start + (i * step));

function buildArray() {
    return range(0, 1000000, 1);
}
var myArray = buildArray();

Tests:

Array spread function array
function getValues(i){ const offset = i * 3; return [myArray[offset],myArray[offset+1],myArray[offset+2]]; } function getTest(i){ const offset = i*3; return [...getValues(offset), ...getValues(offset+1), ...getValues(offset+2)]; } const result = getTest(100);
Array via object
function getValues(i){ const offset = i * 3; return {a: myArray[offset],b: myArray[offset+1],c: myArray[offset+2]}; } function getTest(i){ const offset = i*3; let a = getValues(offset); let b = getValues(offset+1); let c = getValues(offset+2); return [a.a, a.b, a.c, b.a, b.b, b.c,c.a, c.b, c.c]; } const result = getTest(100);
Array direct
function getTest(i){ const offset = i*9; return [myArray[offset], myArray[offset+1],myArray[offset+2],myArray[offset+3],myArray[offset+4],myArray[offset+5],myArray[offset+6],myArray[offset+7],myArray[offset+8]]; } const result = getTest(100);
Array slice
function getTest(i){ const offset = i*9; return myArray.slice(offset, offset+9); } const result = getTest(100);
Array slice proto (for ArrayLike objects)
function getTest(i){ const offset = i*9; return Array.prototype.slice.call(myArray,offset, offset+9); } const result = getTest(100);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array spread function array
Array via object
Array direct
Array slice
Array slice proto (for ArrayLike objects)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
Array spread function array	1144487.9 Ops/sec
Array via object	1232923.1 Ops/sec
Array direct	1555185.9 Ops/sec
Array slice	9231738.0 Ops/sec
Array slice proto (for ArrayLike objects)	3897557.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of different ways to access elements in an array. The test case, "Data transfer v2", creates a large array (1 million elements) and defines several functions to extract subsets from it.

**Test Cases**

There are four test cases:

1. **Array spread function array**: This test case uses the spread operator (`...`) to create a new array by spreading the elements of three adjacent subarrays.
2. **Array via object**: This test case creates an object with properties that correspond to the elements of the original array, and then uses these properties to access the elements.
3. **Array direct**: This test case uses the `slice()` method to extract a subset of elements from the original array.
4. **Array slice proto (for ArrayLike objects)**: This test case uses `Array.prototype.slice.call()` to convert an ArrayLike object to an actual array, and then extracts a subset of elements using `slice()`.

**Options Compared**

The four test cases compare the performance of different approaches to accessing elements in an array:

* **Spread operator (`...`)**: creates a new array by spreading the elements of adjacent subarrays.
* **Object access**: uses an object with properties that correspond to the original array elements to access them.
* **Slice method (`slice()`)**: extracts a subset of elements from the original array using this method.
* **ArrayLike conversion and slice method**: converts an ArrayLike object to an actual array using `Array.prototype.slice.call()`, and then uses `slice()` to extract a subset.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Spread operator (`...`)**:
	* Pros: concise, efficient, and modern.
	* Cons: may not be supported in older browsers or versions of JavaScript.
2. **Object access**:
	* Pros: can be more readable and maintainable than other approaches.
	* Cons: may be slower due to the object creation overhead.
3. **Slice method (`slice()`)**:
	* Pros: widely supported, efficient, and well-established.
	* Cons: may not work as expected with non-array-like objects or in certain edge cases.
4. **ArrayLike conversion and slice method**:
	* Pros: ensures compatibility with all browsers and versions of JavaScript.
	* Cons: less readable and more verbose than other approaches.

**Library and Features**

None of the test cases rely on external libraries or special features beyond what's included in modern JavaScript implementations.

**Other Considerations**

When working with large arrays or performance-critical code, consider the following:

* Use `Array.from()` to create a new array from an iterable, as it may be more efficient than using `slice()`.
* Avoid using `for` loops or other methods that can slow down your code.
* Profile and optimize specific sections of your code for better performance.

As for alternatives, you can consider the following:

* For smaller arrays, use indexing directly (`myArray[i]`) instead of slicing or spreading.
* For more complex data structures, explore libraries like Lodash or Ramda that provide efficient array manipulation methods.
* Consider using WebAssembly (WASM) for high-performance computing tasks on the web.

Related benchmarks:

Data transfer v2 (version: 1)

Lookup results from a large array return

Comparing performance of: Array spread function array vs Array via object vs Array direct vs Array slice vs Array slice proto (for ArrayLike objects)

Created: 3 years ago by: Registered User

Jump to the latest result

Array spread function array

Array via object

Array direct

Array slice

Array slice proto (for ArrayLike objects)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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