Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
isoppp array proptotype push vs concat vs spread
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Spread
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {prototypePush:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Control (for push)
Array.prototype.push.apply(window.top.tests.prototypePush, window.test) if (window.top.tests.prototypePush.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
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'); }
Spread
window.top.tests.spread.push(...window.test); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Control (for push)
Concat
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Browser/OS:
Chrome 126 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=529685" width="100%" height="500px"></iframe>
Spread
2.0M/s
Concat
917K/s
Control (for push)
316K/s
View exact numbers
Test name
Executions per second
✓
Spread
1,990,614 Ops/sec
Concat
916,710 Ops/sec
Control (for push)
315,744 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark and explain what's being tested, compared, and the pros/cons of different approaches. **Benchmark Overview** The benchmark is designed to compare three ways to append elements to a large array: 1. `Array.prototype.push.apply()` 2. `Array.prototype.concat()` 3. `Spread operator (...)` for push **Options Comparison** * **`Array.prototype.push.apply()`**: This method uses the `apply()` method to call the `push()` method on the array with an array of elements as its argument. The pros include: * It's a built-in method, so it's likely to be highly optimized. * It's often faster than other methods because it avoids creating an intermediate array. However, the cons are that: * It can be slower if the number of elements is very large, as it needs to create an array with all the elements beforehand and then push them one by one. * **`Array.prototype.concat()`**: This method uses the `concat()` method to concatenate two arrays. The pros include: * It's also a built-in method, so it's likely to be highly optimized. * It can be faster than other methods because it creates an intermediate array with all the elements before returning the new concatenated array. However, the cons are that: * It can create an unnecessary intermediate array in memory, which might not be desirable for large datasets. * **`Spread operator (...)`**: This method uses the spread operator (`...`) to unpack the elements of the array into separate arguments. The pros include: * It's a modern and concise way to achieve the same result. * It avoids creating an intermediate array. However, the cons are that: * It might be slower than other methods because it needs to create an intermediate array with all the elements beforehand. * Additionally, the test cases also compare the control variables (resetting them when they exceed a certain limit) to measure the overhead of maintaining these variables. **Library and Special JS Features** The benchmark uses the `window` object as a global context for testing. It's a common pattern in JavaScript benchmarks to use a global `window` or `global` object to define tests. **Test Case Analysis** * **`Control (for push)`**: This test case measures the overhead of resetting the control variables when they exceed the cutoff limit. It's used as a baseline to measure the performance of other methods. * **`Concat`**: This test case measures the performance of using `Array.prototype.concat()` to append elements to an array. * **`Spread`**: This test case measures the performance of using the spread operator (`...`) for push. **Other Alternatives** If you're interested in exploring other approaches, here are a few examples: * Using `Array.prototype.push()` directly: This method is similar to `push.apply()`, but without the `apply()` call. It's likely to be slightly faster because it avoids the overhead of calling an additional function. * Using a library like Lodash or Ramda for array manipulation: These libraries provide optimized implementations of various array methods, including push. However, they might introduce additional overhead due to the library itself. * Using a different data structure, such as an immutable array or a linked list: Depending on your use case and requirements, using a different data structure might offer performance benefits. Keep in mind that each approach has its trade-offs, and the best choice will depend on your specific use case and performance requirements.
Related benchmarks
Array spread vs. push performance
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs push.apply for large arrays
Concat vs push(...) for large arrays with PrototypePushApply
Comments
Confirm delete:
Do you really want to delete benchmark?