Benchmark: Uint8Array vs Uint8ClampedArray 4 value copy

Script Preparation code:

var arr1 = new Uint8Array(2500);
var arr2 = new Uint8ClampedArray(2500);

Tests:

Uint8Array
for(let i = 0; i < 2500; i += 4) { let next = (i + 4) % 2500; arr1[i] = arr1[next]; arr1[i+1] = arr1[next+1]; arr1[i+2] = arr1[next+2]; arr1[i+3] = arr1[next+3]; } arr1[37] = arr1[732]
Uint8ClampedArray
for(let i = 0; i < 2500; i += 4) { let next = (i + 4) % 2500; arr2[i] = arr2[next]; arr2[i+1] = arr2[next+1]; arr2[i+2] = arr2[next+2]; arr2[i+3] = arr2[next+3]; } arr2[37] = arr2[732]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Uint8Array
Uint8ClampedArray

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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Uint8Array	6825.6 Ops/sec
Uint8ClampedArray	6860.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark test comparing two types of arrays in JavaScript: `Uint8Array` and `Uint8ClampedArray`. The test measures how fast it is to copy values between these two array types using a specific pattern.

**Options Compared**

Two options are compared:

1. **`Uint8Array`**: An array that stores unsigned 8-bit integers, with no clipping or bounds checking.
2. **`Uint8ClampedArray`**: An array that stores unsigned 8-bit integers, but with clipping and bounds checking.

**Pros and Cons of Each Approach**

*   **`Uint8Array`**:
    *   Pros: Faster copying performance due to less overhead from bounds checking.
    *   Cons: May cause NaN (Not a Number) values when overflows occur, which could lead to unexpected behavior in the code that uses these arrays.
*   **`Uint8ClampedArray`**:
    *   Pros: Clipping and bounds checking help prevent NaN values and provide better control over array data.
    *   Cons: Slower copying performance due to additional overhead from checks.

**Library Used**

The `arr1` and `arr2` arrays are instances of the `Uint8Array` and `Uint8ClampedArray` classes, respectively. These classes are part of the JavaScript standard library, providing a way to create typed arrays that can be used in various applications.

**JavaScript Feature/Syntax Used**

The benchmark uses modern JavaScript features:

*   **Template literals**: The `for...of` loop headers and string interpolation use template literals (`\r\n`) for formatting code.
*   **Arrow functions**: The array iteration block is expressed using an arrow function (`(i, next) => { ... }`).

**Other Considerations**

*   **Memory allocation**: Both arrays require significant memory to store 2500 values. This can impact the overall performance and even lead to OutOfMemoryError errors on lower-end hardware.
*   **Cache locality**: Copying data within an array, like in this benchmark, is sensitive to cache locality. The browser's caching behavior may influence the observed execution times.

**Alternative Benchmarks**

If you're interested in exploring other JavaScript microbenchmark scenarios:

*   **Array operations**: Compare different types of array operations like `push()`, `pop()`, and `splice()`.
*   **Object manipulation**: Measure the performance of various object-related tasks, including property access, modification, and iteration.
*   **String processing**: Benchmark string concatenation, substring extraction, or regular expression matching.

Keep in mind that each benchmark is designed to test a specific aspect of JavaScript performance.

Related benchmarks:

Uint8Array vs Uint8ClampedArray 4 value copy (version: 0)

Comparing performance of: Uint8Array vs Uint8ClampedArray

Created: one year ago by: Guest

Jump to the latest result

Uint8Array

Uint8ClampedArray

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):