Benchmark: DataView vs Uint8Array by bytes write + read

Script Preparation code:

var size = 0xFF;
var buf = new ArrayBuffer(size);
var view = new DataView(buf);
var byte = new Uint8Array(buf);

var data = [];

for (let i = 0; i < size; i++) {
	data[i] = 100*Math.random();
}

​x
 
var size = 0xFF;var buf = new ArrayBuffer(size);var view = new DataView(buf);var byte = new Uint8Array(buf);​var data = [];​for (let i = 0; i < size; i++) {    data[i] = 100*Math.random();}

Tests:

DataView

for (let i; i < size; i++) {
	view.setUint8(i, data[i]);
}

const results = []
for (let i; i < size; i++) {
	results.push(view.getUint8(i, data[i]));
}

 
for (let i; i < size; i++) {    view.setUint8(i, data[i]);}​const results = []for (let i; i < size; i++) {    results.push(view.getUint8(i, data[i]));}

Uint8Array by byte

for (let i; i < size; i++) {
	byte[i] = data[i];
}

const results = [];
for (let i; i < size; i++) {
	results.push(byte[i]);
}

 
for (let i; i < size; i++) {    byte[i] = data[i];}​const results = [];for (let i; i < size; i++) {    results.push(byte[i]);}

Uint8Array with set
byte.set(data, 0);
byte.set(data, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
DataView
Uint8Array by byte
Uint8Array with set

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months 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
DataView	6526921.5 Ops/sec
Uint8Array by byte	6428717.5 Ops/sec
Uint8Array with set	1978330.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

What is being tested?

MeasureThat.net is testing the performance of three different approaches for reading and writing data to a byte array in JavaScript:

DataView: Using the DataView API, which allows direct access to the memory address of an ArrayBuffer.
Uint8Array by byte: Writing directly to individual bytes of a Uint8Array using its indexing syntax (byte[i] = data[i];).
Uint8Array with set: Using the set() method of a Uint8Array, which sets multiple bytes at once.

Options comparison

The three options are compared in terms of their performance, measured by the number of executions per second (ExecutionsPerSecond).

DataView: Pros:
- Direct access to memory address, potentially faster for large arrays.
- Can be more efficient when working with specific data types.
Cons:
- May require additional setup and initialization.
Uint8Array by byte: Pros:
- Simple and straightforward syntax.
- Does not require any special setup or initialization.
Cons:
- Potential slower performance due to individual byte access.

Pros and cons of each approach

DataView:
- Faster for large arrays: DataView can be faster because it accesses memory directly, whereas Uint8Array by byte needs to iterate through each individual byte.
- More efficient for specific data types: DataView allows direct access to specific data types (e.g., Uint16Array), which might be more efficient than using Uint8Array.
- Requires setup: You need to create a new DataView instance from an ArrayBuffer, which can add extra steps.
Uint8Array by byte:
- Simple syntax: Using individual bytes is straightforward and easy to understand.
- No additional setup required: You can start writing data directly without creating any special objects or arrays.
- Potential slower performance: Accessing each individual byte might be slower than accessing memory directly using DataView.
Uint8Array with set:
- Simple syntax: The set() method allows setting multiple bytes at once in a single operation.
- Fast execution: It's likely faster because it doesn't require iterating over each individual byte like in the Uint8Array by byte approach.

However, there is no clear "best" option that suits all cases. Ultimately, the choice of which one to use depends on your specific requirements and performance needs.

Other considerations

Memory allocation: DataView creates a new view into an existing ArrayBuffer, while Uint8Array by byte and Uint8Array with set create their own Arrays.
Type safety: DataView supports a wide range of data types, whereas Uint8Array by byte and Uint8Array with set are limited to integers only.

Libraries used

None mentioned in this case.

Special JS features or syntax

No special JavaScript feature or syntax is being utilized here.

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of three different approaches for reading and writing data to a byte array in JavaScript:

1. **DataView**: Using the `DataView` API, which allows direct access to the memory address of an ArrayBuffer.
2. **Uint8Array by byte**: Writing directly to individual bytes of a Uint8Array using its indexing syntax (`byte[i] = data[i];`).
3. **Uint8Array with set**: Using the `set()` method of a Uint8Array, which sets multiple bytes at once.

**Options comparison**

The three options are compared in terms of their performance, measured by the number of executions per second (ExecutionsPerSecond).

*   **DataView**: Pros:
    *   Direct access to memory address, potentially faster for large arrays.
    *   Can be more efficient when working with specific data types.
*   Cons:
    *   May require additional setup and initialization.
*   **Uint8Array by byte**: Pros:
    *   Simple and straightforward syntax.
    *   Does not require any special setup or initialization.
*   Cons:
    *   Potential slower performance due to individual byte access.

**Pros and cons of each approach**

1.  **DataView**:
    *   Faster for large arrays: `DataView` can be faster because it accesses memory directly, whereas `Uint8Array by byte` needs to iterate through each individual byte.
    *   More efficient for specific data types: `DataView` allows direct access to specific data types (e.g., Uint16Array), which might be more efficient than using `Uint8Array`.
    *   Requires setup: You need to create a new `DataView` instance from an ArrayBuffer, which can add extra steps.
2.  **Uint8Array by byte**:
    *   Simple syntax: Using individual bytes is straightforward and easy to understand.
    *   No additional setup required: You can start writing data directly without creating any special objects or arrays.
    *   Potential slower performance: Accessing each individual byte might be slower than accessing memory directly using `DataView`.
3.  **Uint8Array with set**:
    *   Simple syntax: The `set()` method allows setting multiple bytes at once in a single operation.
    *   Fast execution: It's likely faster because it doesn't require iterating over each individual byte like in the Uint8Array by byte approach.

However, there is no clear "best" option that suits all cases.  Ultimately, the choice of which one to use depends on your specific requirements and performance needs.

**Other considerations**

*   **Memory allocation**: `DataView` creates a new view into an existing ArrayBuffer, while `Uint8Array by byte` and `Uint8Array with set` create their own Arrays.
*   **Type safety**: `DataView` supports a wide range of data types, whereas `Uint8Array by byte` and `Uint8Array with set` are limited to integers only.

**Libraries used**

None mentioned in this case.

**Special JS features or syntax**

No special JavaScript feature or syntax is being utilized here.

Related benchmarks:

DataView vs Uint8Array by bytes write + read (version: 0)

Comparing performance of: DataView vs Uint8Array by byte vs Uint8Array with set

Created: one year ago by: Guest

Jump to the latest result