Benchmark: DataView vs Uint8Array by bytes vs Native Array

Script Preparation code:

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

var data = [];
var nativeArr = new Array(size);

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 = [];var nativeArr = new Array(size);​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]);
}

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

Uint8Array by byte
for (let i; i < size; i++) { byte[i] = data[i]; }
for (let i; i < size; i++) {
byte[i] = data[i];
}
Uint8Array with set
byte.set(data, 0);
byte.set(data, 0);

Native Array

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

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

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
Native Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 90 on Windows

View result in a separate tab

Test name	Executions per second
DataView	12911557.0 Ops/sec
Uint8Array by byte	12899118.0 Ops/sec
Uint8Array with set	736197.0 Ops/sec
Native Array	12828039.0 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

Benchmark Overview

The provided benchmark tests the performance of three different approaches for setting data in an array:

DataView
Uint8Array by byte
Native Array

Each test case measures the execution time for setting each individual element of the array.

Options Compared

Here are the options being compared:

DataView: a binary view of an ArrayBuffer, providing direct access to its underlying bytes.
Uint8Array by byte: using a Uint8Array constructor with a specific length and then setting each individual element individually.
Native Array: using a native JavaScript array constructor.

Pros and Cons

Here's a brief summary of the pros and cons of each approach:

DataView:
- Pros: Direct access to underlying bytes, potentially faster execution time.
- Cons: May require more memory allocation and deallocation, depending on the use case.
Uint8Array by byte:
- Pros: Easy to implement and understand, suitable for small arrays or specific use cases.
- Cons: Requires creating a new Uint8Array instance for each element, which may incur additional overhead.
Native Array:
- Pros: Efficient memory allocation and deallocation, suitable for large arrays or performance-critical code.
- Cons: May require more complex memory management, especially when dealing with arrays of varying lengths.

Library/Functionality Used

In this benchmark, the following library/functionality is used:

DataView: a built-in JavaScript API providing direct access to ArrayBuffer views.
Uint8Array by byte: a constructor provided by the Web APIs (Specifically, the Uint8Array constructor).
Native Array: a native JavaScript array constructor.

Special JS Feature/Syntax

In this benchmark, no special JS feature or syntax is used beyond the standard API functions and constructors. However, it's worth noting that some modern browsers may optimize certain operations using SIMD (Single Instruction, Multiple Data) instructions or other advanced techniques.

Other Alternatives

If you'd like to explore alternative approaches for setting data in an array, consider the following options:

Using a Buffer object instead of Uint8Array.
Implementing a custom allocator for arrays using Web Workers or other low-level APIs.
Utilizing specialized libraries like typedarrays or bigint-typedarray for high-performance typed arrays.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark tests the performance of three different approaches for setting data in an array:

1. `DataView`
2. `Uint8Array` by byte
3. `Native Array`

Each test case measures the execution time for setting each individual element of the array.

**Options Compared**

Here are the options being compared:

* `DataView`: a binary view of an ArrayBuffer, providing direct access to its underlying bytes.
* `Uint8Array` by byte: using a Uint8Array constructor with a specific length and then setting each individual element individually.
* `Native Array`: using a native JavaScript array constructor.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* `DataView`:
	+ Pros: Direct access to underlying bytes, potentially faster execution time.
	+ Cons: May require more memory allocation and deallocation, depending on the use case.
* `Uint8Array` by byte:
	+ Pros: Easy to implement and understand, suitable for small arrays or specific use cases.
	+ Cons: Requires creating a new Uint8Array instance for each element, which may incur additional overhead.
* `Native Array`:
	+ Pros: Efficient memory allocation and deallocation, suitable for large arrays or performance-critical code.
	+ Cons: May require more complex memory management, especially when dealing with arrays of varying lengths.

**Library/Functionality Used**

In this benchmark, the following library/functionality is used:

* `DataView`: a built-in JavaScript API providing direct access to ArrayBuffer views.
* `Uint8Array` by byte: a constructor provided by the Web APIs (Specifically, the `Uint8Array` constructor).
* `Native Array`: a native JavaScript array constructor.

**Special JS Feature/Syntax**

**Other Alternatives**

If you'd like to explore alternative approaches for setting data in an array, consider the following options:

* Using a `Buffer` object instead of `Uint8Array`.
* Implementing a custom allocator for arrays using Web Workers or other low-level APIs.
* Utilizing specialized libraries like `typedarrays` or `bigint-typedarray` for high-performance typed arrays.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

DataView vs Uint8Array by bytes vs Native Array (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result