Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) for large arrays 222
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Spread
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Control (for push)
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'); }
Spread
for (let element of window.test) {window.top.tests.spread = [...window.top.tests.spread, element];} 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 (2)
Previous results
Fork
Test case name
Result
Control (for push)
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 124 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=532713" width="100%" height="500px"></iframe>
Control (for push)
48K/s
Spread
6K/s
View exact numbers
Test name
Executions per second
✓
Control (for push)
48,093 Ops/sec
Spread
6,284 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **Benchmark Definition** The provided JSON represents a JavaScript microbenchmark on MeasureThat.net, specifically comparing two approaches to append elements to an array: `push` and spread syntax (`...`). **Options Compared** Two options are compared: 1. **Control (for push)**: This approach uses the `push` method to add elements to the end of the array. 2. **Spread**: This approach uses the spread syntax (`...`) to create a new array with the added elements. **Pros and Cons of Each Approach** * **Control (for push)**: + Pros: - Widely supported by most JavaScript engines. - Easy to understand and implement. + Cons: - Can be slower for large arrays due to the overhead of pushing elements. - May cause garbage collection pauses if the array grows too large. * **Spread**: + Pros: - Can be faster than `push` for large arrays since it creates a new array without modifying the original one. - Avoids potential garbage collection issues when appending to large arrays. + Cons: - Not all browsers support the spread syntax, and its performance can vary depending on the engine. **Library and Purpose** There is no explicit library mentioned in this benchmark. However, the `window.top.tests` object is used to store test results, which suggests that MeasureThat.net uses a custom framework or library for running JavaScript microbenchmarks. **Special JS Feature/Syntax** The benchmark does not use any special JavaScript features or syntax beyond what's commonly supported by most browsers. The focus is on comparing two standard approaches to array manipulation: `push` and spread. **Other Alternatives** If you're interested in exploring alternative ways to append elements to an array, here are a few options: * **Array.prototype.push.apply()**: This method uses the `apply()` method to call `push()` with multiple arguments. * **Array.from() + push()**: You can create a new array using `Array.from()` and then push elements onto it. Keep in mind that these alternatives may have different performance characteristics or be more suitable for specific use cases.
Related benchmarks
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs push.apply for large arrays
Comments
Confirm delete:
Do you really want to delete benchmark?