window.top.tests = {control:[], concat:[], spread:[]};
window.test = (new Array(10)).fill(Math.random());
window.cutoff = 5000;
for (let element of window.test) window.top.tests.control.push(element);
if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
window.top.tests.concat = window.top.tests.concat.concat(window.test);
if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
window.top.tests.spread.push(window.test);
if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Control (for push) | |
Concat | |
Spread |
Test name | Executions per second |
---|---|
Control (for push) | 189678.1 Ops/sec |
Concat | 221223.9 Ops/sec |
Spread | 656815.3 Ops/sec |
Let's dive into the explanation of what is tested on the provided JSON.
Benchmark Definition
The benchmark measures the performance of three different approaches to append elements to an array:
push()
: Using the push()
method to add elements to the end of the array.concat()
: Using the concat()
method to concatenate a new array to the existing one.Spread Operator (
: Using the spread operator (...)
to append elements to the array.Options Compared
The benchmark compares the performance of these three approaches for large arrays, specifically 10-element arrays generated with Math.random()
. The results are compared in terms of execution time per second.
Pros and Cons
push()
: This is a built-in method that is generally fast and efficient. However, it may require additional iterations to check the length of the array and reset it if necessary.concat()
: This method creates a new array by concatenating the existing one with the new elements. While it's simple to use, it can be slower than push()
due to the overhead of creating a new array.Spread Operator (
: This is a relatively new feature that was introduced in ECMAScript 2015 (ES6). It uses the spread operator (...
) to expand the array into individual elements. While it's concise and expressive, its performance may vary depending on the browser support.Library Used
None of the test cases use any external libraries beyond the built-in JavaScript methods and the Math.random()
function.
Special JS Feature/Syntax
The benchmark uses the spread operator (...
) which is a relatively new feature introduced in ECMAScript 2015 (ES6). This feature allows for concise array expansion, but its performance may vary depending on browser support. In this case, it appears that Chrome 87 supports the spread operator.
Benchmark Preparation Code
The benchmark preparation code sets up an object window.top.tests
with three arrays: control
, concat
, and spread
. It also generates a random 10-element array using Math.random()
and defines a cutoff value of 5000. The test
function is used to execute the benchmark.
Other Alternatives
Alternative approaches to appending elements to an array could include:
Array.prototype.unshift()
: This method adds elements to the beginning of the array, which may have different performance characteristics compared to push()
.However, these alternatives are not tested in this specific benchmark.