Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Push-spread vs concat assignment
(version: 0)
Comparing a few various ways to append to a large array
Comparing performance of:
Push vs Spread
Created:
one year ago
by:
Guest
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Push
window.top.tests.control.push(...window.test); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Spread
window.top.tests.control = window.top.tests.control.concat(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 (2)
Previous results
Fork
Test case name
Result
Push
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=523776" width="100%" height="500px"></iframe>
Test name
Executions per second
Push
662836.9 Ops/sec
Spread
1318.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks! **Benchmark Overview** The provided JSON represents a benchmark test case, titled "Push-spread vs concat assignment". The goal of this benchmark is to compare the performance of three different approaches for appending elements to a large array: 1. **Push**: Using the `push()` method to add elements to the end of the array. 2. **Spread**: Using the spread operator (`...`) to create a new array with the concatenated elements. 3. **Concat assignment**: Assigning the result of `concat()` method to assign new values to the existing array. **Options Compared** The benchmark compares the performance of these three approaches, specifically: * The control approach (Push) * The optimized approach (Spread) * A baseline approach (Concat assignment) **Pros and Cons of Each Approach** 1. **Push**: * Pros: Simple, easy to implement, and works well for small arrays. * Cons: Can be slow for large arrays due to the overhead of repeated method calls. 2. **Spread**: * Pros: More efficient than Push for large arrays since it creates a new array with fewer allocations. * Cons: May not work as expected when dealing with complex data structures or object literals. 3. **Concat assignment**: * Pros: Fast and efficient, especially when dealing with large arrays. * Cons: Can be slower than Spread if the array is very large, since it creates a new array on each concatenation. **Library and Special JS Feature** There are no libraries used in this benchmark, but we do notice that the `window.top.tests` object is used to store test data. This suggests that the benchmark is designed for use within a browser environment, possibly as part of a testing framework. No special JavaScript features or syntaxes are used in this benchmark. **Other Considerations** * The benchmark uses a large array (`new Array(10).fill(null)`) as input data to stress test the performance of each approach. * The `cutoff` variable is used to reset the arrays if they exceed a certain size, which helps prevent overflows and makes it easier to run multiple iterations. **Alternative Approaches** If you're interested in exploring alternative approaches for appending elements to an array, here are some other methods: 1. **Using `Array.prototype.push.apply()`**: This method can be more efficient than Push, especially for large arrays. 2. **Using `Array.prototype.splice()`**: This method can be used to add or remove elements from the end of an array, but may have performance implications depending on the size of the array. Keep in mind that these alternative approaches might not be as widely supported or optimized as the three approaches compared in this benchmark.
Related benchmarks:
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs. spread for large arrays
Concat vs push(...) for large arrays using spread in test 2
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?