Benchmark: uint8Array shallow cloning methods

Script Preparation code:

const uint8array = new Uint8Array(81);

for(let i = 0; i < 81; i++) {
    uint8array[i] = Math.floor(Math.random() * 2);
}

Tests:

slice()
for (let i; i < 1000; i++) { const copy = uint8array.slice(); r = Math.floor(Math.random() * 81); copy[r] ^= 1; }
spread
for (let i; i < 1000; i++) { const copy = [...uint8array]; r = Math.floor(Math.random() * 81); copy[r] ^= 1; }
from()
for (let i; i < 1000; i++) { const copy = TypedArray.from(uint8array); r = Math.floor(Math.random() * 81); copy[r] ^= 1; }
with()
for (let i; i < 1000; i++) { r = Math.floor(Math.random() * 81); const copy = uint8array.with(r, uint8array[r] ^ 1); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice()
spread
from()
with()

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):

LLMs can make mistakes. Check important info.

The benchmark you provided tests different methods of shallow cloning a `Uint8Array`, which is a type of typed array in JavaScript used to represent an array of 8-bit unsigned integers. Each individual test case evaluates the performance of a specific cloning method by measuring how many iterations can be executed in a second under the same conditions.

### Description of Each Approach:

1. **slice()**
   - **Benchmark Definition:** `const copy = uint8array.slice();`
   - This method returns a shallow copy of a portion of the array into a new `Uint8Array` object.
   - **Pros:** It is straightforward and commonly used for copying arrays. 
   - **Cons:** It may have less optimization compared to other newer methods.

2. **spread operator (`...`)**
   - **Benchmark Definition:** `const copy = [...uint8array];`
   - The spread operator creates a new array by expanding the elements of the `Uint8Array`.
   - **Pros:** Highly readable and concise syntax; it works seamlessly with different types of arrays and is familiar to many JavaScript developers.
   - **Cons:** Slightly less efficient in terms of performance compared to other methods, primarily due to the overhead of syntax interpretation.

3. **TypedArray.from()**
   - **Benchmark Definition:** `const copy = TypedArray.from(uint8array);`
   - This method creates a new `Uint8Array` from an array-like or iterable object.
   - **Pros:** It is explicitly designed for creating arrays from other arrays, which can offer better clarity when reading code.
   - **Cons:** Performance may vary based on the implementation and could be slightly slower than using `slice()` or the spread operator.

4. **with()**
   - **Benchmark Definition:** `const copy = uint8array.with(r, uint8array[r] ^ 1);`
   - The `with()` method constructs a new array by using a specified index (`r`) to modify a specific element, effectively performing an operation while cloning.
   - **Pros:** Provides a specific method for modifying individual elements while creating a clone, which can be useful for certain scenarios where only one element needs to change.
   - **Cons:** This method is less commonly used and may lead to less readable code, particularly for those not familiar with how it works.

### Results Overview:

The benchmarking results show that the **spread operator** is the fastest, followed closely by `TypedArray.from()`, while `slice()` and `with()` lag behind. This suggests that in environments where performance is critical, the spread operator is a strong choice for cloning `Uint8Array` objects, although other factors like readability and maintainability also play a vital role when choosing an approach for production code.

### Other Considerations:

- **Performance Variability:** The performance results can change with different JavaScript engines, browser implementations, and systems. It’s essential to consider benchmarks relevant to the target platform.
- **Readability vs. Performance:** While performance is crucial, using a method that is straightforward and well understood by the team is often more beneficial in the long run, especially in larger codebases.
- **Future-Proofing:** As JavaScript evolves, new features and optimizations are introduced. Keeping an eye on performance changes in updates to JavaScript engines is a good practice.

### Alternatives to Cloning `Uint8Array`:

- **Looping**: Manually copying elements with a for-loop is a possible approach, though typically slower and less elegant.
- **Array.from()**: Although more general-purpose, it can also convert other iterable objects into arrays.
- **Buffer Utilities**: In environments or frameworks where binary data manipulation is common (like Node.js), utilizing specific buffer libraries may provide additional features and advantages, especially for complex binary data structures.

In conclusion, the methods evaluated in this benchmark provide various trade-offs in terms of performance, readability, and clarity, and the best choice often depends on the specific requirements of the project.

Latest run results:

Run details: (Test run date: 14 days ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
slice()	91419064.0 Ops/sec
spread	102192776.0 Ops/sec
from()	100473248.0 Ops/sec
with()	81906104.0 Ops/sec

Related benchmarks:

uint8Array shallow cloning methods (version: 1)

uint8Array shallow cloning methods

Comparing performance of: slice() vs spread vs from() vs with()

Created: 15 days ago by: Registered User

Jump to the latest result

slice()

spread

from()

with()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):