Benchmark: Float32Array vs DataView 2022

Script Preparation code:

var size = 0xFFFF;
var data = new Float32Array(size);
var floatArray = new Float32Array(size);
var dataView = new DataView(new ArrayBuffer(size * 4));

for (let i = 0; i < size; i++) {
	data[i] = 100*Math.random();
	floatArray[i] = 100*Math.random();
	dataView[i] = 100*Math.random();
}

Tests:

DataView
for (let i; i < size; i++) { dataView.setFloat32(i * 4, data[i]); } return dataView.getFloat32(i * size - 16)
Float32Array
for (let i; i < size; i++) { floatArray[i] = data[i]; } return floatArray[size - 4]

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Float32Array

10.9M/s

DataView

10.4M/s

View exact numbers

✓ Float32Array: 10,853,741 ops/sec
• DataView: 10,402,035 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
Float32Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Ubuntu

View result in a separate tab

DataView

1334.2M/s

Float32Array

1334.1M/s

View exact numbers

Test name	Executions per second
✓ DataView	1,334,173,568 Ops/sec
Float32Array	1,334,105,344 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!

**What is being tested?**

The provided benchmark measures the performance difference between two approaches:

1. **DataView**: A binary view of an ArrayBuffer, allowing for direct access to its contents as if it were a typed array or an object.
2. **Float32Array**: A typed array that stores 32-bit floating-point numbers.

**Options compared**

The two options being compared are the methods used to set and retrieve values from the `DataView` instance:

1. `setFloat32`: Sets a single floating-point value at a specified offset in the data view.
2. `getFloat32`: Returns a single floating-point value at a specified offset in the data view.

**Pros and cons of each approach**

**DataView**

Pros:

* Provides direct access to the underlying ArrayBuffer, potentially offering improved performance due to reduced overhead.
* Allows for more fine-grained control over memory allocation and deallocation.

Cons:

* Requires manual management of offsets and buffer sizes, which can increase complexity.
* May introduce additional memory safety issues if not used carefully.

**Float32Array**

Pros:

* Provides a higher-level abstraction than `DataView`, making it easier to work with typed arrays in JavaScript.
* Offers built-in support for bounds checking and invalid value handling.

Cons:

* May incur additional overhead due to the need for JavaScript's type coercion and bounds checking.
* Can be slower than `DataView` due to the extra layer of abstraction.

**Library: ArrayBuffer**

The `ArrayBuffer` is a native JavaScript object that represents a contiguous region of memory. It's used as the underlying buffer for both `DataView` and `Float32Array`. The `ArrayBuffer` provides an efficient way to manipulate binary data in JavaScript, making it a crucial component of many high-performance applications.

**Special JS feature: none mentioned**

There are no special JavaScript features or syntax being tested in this benchmark. Both options rely on standard JavaScript features like arrays, buffers, and typed arrays.

**Other alternatives**

If you're interested in exploring alternative approaches to setting and retrieving values from an ArrayBuffer, consider the following:

* **TypedArray**: A class that extends `Array` with methods for creating typed arrays (e.g., `Float32Array`, `Uint8Array`, etc.).
* **WebAssembly**: A binary format for representing small, self-contained programs in a binary format that can be executed by web browsers.
* **Native Buffer**: In Node.js, the `Buffer` class provides a way to work with binary data in native code.

Keep in mind that each of these alternatives has its own strengths and weaknesses, and may not offer performance advantages over the methods being tested here.

Float32Array vs DataView 2022 (version: 0)

Comparing performance of: `DataView vs Float32Array`

Created: 3 years ago by: Registered User

Go to the latest result

DataView

Float32Array

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Float32Array vs DataView 2022 (version: 0)

Comparing performance of: DataView vs Float32Array

Created: 3 years ago by: Registered User

Go to the latest result

DataView

Float32Array

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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 Float32Array`