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));

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 84 runs

Uint8Array by byte

38.5M/s

DataView

38.4M/s

Uint8Array with set

858K/s

with Float64Array

733K/s

Fastest: Uint8Array by byte (52.6x faster)

View exact numbers

✓ Uint8Array by byte: 38,498,392 ops/sec
• DataView: 38,420,432 ops/sec
• Uint8Array with set: 858,184 ops/sec
• with Float64Array: 732,604 ops/sec

Firefox 13 runs

Uint8Array by byte

1218.1M/s

DataView

1212.2M/s

Uint8Array with set

795K/s

with Float64Array

702K/s

Fastest: Uint8Array by byte (1736.5x faster)

View exact numbers

✓ Uint8Array by byte: 1,218,149,504 ops/sec
• DataView: 1,212,238,976 ops/sec
• Uint8Array with set: 794,758 ops/sec
• with Float64Array: 701,511 ops/sec

Mobile Results:

Chrome 9 runs

Uint8Array by byte

12.2M/s

DataView

12.2M/s

Uint8Array with set

662K/s

with Float64Array

439K/s

Fastest: Uint8Array by byte (27.7x faster)

View exact numbers

✓ Uint8Array by byte: 12,186,087 ops/sec
• DataView: 12,163,494 ops/sec
• Uint8Array with set: 661,659 ops/sec
• with Float64Array: 439,278 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one month ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Uint8Array by byte

160.7M/s

DataView

160.1M/s

Uint8Array with set

970K/s

with Float64Array

929K/s

View exact numbers

Test name	Executions per second
✓ Uint8Array by byte	160,656,048 Ops/sec
DataView	160,057,120 Ops/sec
Uint8Array with set	970,046 Ops/sec
with Float64Array	928,688 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 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.

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: 6 years ago by: Guest

Go to the latest result

DataView

Uint8Array by byte

Uint8Array with set

with Float64Array

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 84 runs

Firefox 13 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Guest

Go to the latest result

DataView

Uint8Array by byte

Uint8Array with set

with Float64Array

Historical Performance Data aggregated from 106 community runs

Desktop Results:

Chrome 84 runs

Firefox 13 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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