Benchmark: copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes

Script Preparation code:

var size = 0xFFFF;
var buf = new ArrayBuffer(size);
var view = new DataView(buf);
var byte = new Uint8Array(buf);

var data = new Uint8Array(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]); }
Uint8Array by byte
for (let i; i < size; i++) { byte[i] = data[i]; }
Uint8Array with set
byte.set(data);
with Float64Array
(new Float64Array(buf, 0, size/8)) .set(new Float64Array(data.buffer, 0, size/8));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DataView
Uint8Array by byte
Uint8Array with set
with Float64Array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
DataView	59446236.0 Ops/sec
Uint8Array by byte	61531012.0 Ops/sec
Uint8Array with set	824513.2 Ops/sec
with Float64Array	804934.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is comparing four different approaches for copying data from an `ArrayBuffer` to a JavaScript array:

1. **DataView**: Using the `setUint8()` method on a `DataView` object to set the values of an array.
2. **Uint8Array by byte**: Creating a new `Uint8Array` instance and setting its values directly using indexing (`byte[i] = data[i];`).
3. **Uint8Array with set**: Using the `set()` method on a `Uint8Array` object to set its values.
4. **Float64Array**: Creating a new `Float64Array` instance from an `ArrayBuffer` and setting its values using the `set()` method.

Now, let's discuss the pros and cons of each approach:

* **DataView**: This approach is efficient because it avoids creating intermediate arrays or objects. However, it requires the use of a `DataView` object, which might be less intuitive for some developers.
* **Uint8Array by byte**: This approach is straightforward and easy to understand. It creates a new array and sets its values directly, which can be slower than using optimized methods like `set()` in the case of large arrays.
* **Uint8Array with set**: This approach uses an optimized method to set the values of the array, making it faster than creating a new array and setting its values individually. However, it requires more code and might be less intuitive for some developers.
* **Float64Array**: This approach is slower due to the overhead of creating a `Float64Array` instance from an `ArrayBuffer`. Additionally, it's not as efficient as using optimized methods like `set()` on `Uint8Array`.

Other considerations:

* Memory allocation: Creating arrays or objects can lead to memory allocation and deallocation, which can impact performance.
* Loop unrolling: Optimized algorithms might use loop unrolling techniques to improve performance.

Library usage:
None of the approaches uses any external libraries. However, if you were to write a benchmarking library yourself, you could consider using libraries like `numjs` or ` typedarrays` for optimized array operations.

Special JS features:
None of the approaches explicitly uses special JavaScript features like async/await, Promises, or Web Workers. If performance-critical code was being optimized further, you might need to explore these features.

Benchmark preparation code and individual test cases:

The benchmark preparation code sets up an `ArrayBuffer` instance and creates a sample array (`data`) with random values. The individual test cases provide the `Benchmark Definition` strings, which define the loop that will be executed in each approach. These loops set the values of arrays using the different approaches.

Alternatives:
Other alternatives for copying data from an `ArrayBuffer` to a JavaScript array include:

* Using `atob()` and `new Uint8Array(atob(result).split('').map(c => c.charCodeAt(0)))`
* Using `new ArrayBuffer(size * 8)`, creating a new `Uint8Array` instance, and then copying the data from the original array using indexing.
* Using `Buffer.from()` and `new Uint8Array(Buffer.from(data))`

Keep in mind that these alternatives might have different performance characteristics depending on the specific use case.

Related benchmarks:

copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

DataView

Uint8Array by byte

Uint8Array with set

with Float64Array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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