Benchmark: Buffer Filling - MeasureThat.net

Tests:

DataView (AoS)
const stride = 10; const buffer = new ArrayBuffer(stride * 1000); /* 0 u16 id 2 f32 x 6 f32 y */ for (let i = 0; i < 1000; i++) { const struct = new DataView(buffer, i * stride); struct.setUint16(0, i); struct.setFloat32(2, i); struct.setFloat32(6, i * 2); }
TypedArray (byte-aligned AoS)
const stride = 12; const buffer = new ArrayBuffer(stride * 1000); /* 0 u16 id 4 f32 x 8 f32 y */ const floats = new Float32Array(buffer); const u16s = new Uint16Array(buffer); for (let i = 0; i < 1000; i++) { u16s[i * stride] = i; floats[i * stride + 4] = i; floats[i * stride + 8] = i * 2; }
TypedArray (SoA)
const buffers = { id: new Uint16Array(1000), x: new Float32Array(1000), y: new Float32Array(1000), }; for (let i = 0; i < 1000; i++) { buffers.id[i] = i; buffers.x[i] = i; buffers.y[i] = i * 2; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DataView (AoS)
TypedArray (byte-aligned AoS)
TypedArray (SoA)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
DataView (AoS)	9205.8 Ops/sec
TypedArray (byte-aligned AoS)	329237.2 Ops/sec
TypedArray (SoA)	290214.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Overview**

The test case is designed to measure the performance of different approaches for filling data into typed arrays and DataViews in JavaScript. The goal is to compare the execution speed and efficiency of these methods.

**Test Cases**

There are three test cases:

1. **DataView (AoS)**: This test case uses a DataView object with array-of-records (AoS) layout, where each record has three fields: `id`, `x`, and `y`.
2. **TypedArray (byte-aligned AoS)**: This test case uses a typed array (`Float32Array`) with byte-aligned AoS layout, where the first field is an unsigned 16-bit integer (`u16s`), followed by two floating-point numbers (`floats`). The second field is used to store values for `x`, and the third field is used to store values for `y`.
3. **TypedArray (SoA)**: This test case uses a typed array with structure-of-arrays (SoA) layout, where each record has three fields: `id`, `x`, and `y`. The values are stored in separate arrays (`id`, `x`, and `y`) within the same buffer.

**Options Compared**

The main options being compared are:

* **DataView (AoS)**: Uses a DataView object with AoS layout, where each record is stored in a contiguous block of memory.
* **TypedArray (byte-aligned AoS)**: Uses a typed array (`Float32Array`) with byte-aligned AoS layout, where the first field is an unsigned 16-bit integer, followed by two floating-point numbers.
* **TypedArray (SoA)**: Uses a typed array with SoA layout, where each record has three fields stored in separate arrays within the same buffer.

**Pros and Cons**

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

* **DataView (AoS)**:
	+ Pros: Can be more memory-efficient, as records are stored in contiguous blocks.
	+ Cons: May have slower access times due to the need to calculate offsets.
* **TypedArray (byte-aligned AoS)**:
	+ Pros: Provides a good balance between memory efficiency and access speed.
	+ Cons: Requires explicit alignment of data fields to byte boundaries, which can add overhead.
* **TypedArray (SoA)**:
	+ Pros: Can be more cache-friendly, as each field is stored in separate contiguous blocks.
	+ Cons: May have higher memory usage due to the need for multiple arrays.

**Other Considerations**

When choosing an approach, consider the following factors:

* Memory efficiency
* Access speed and locality
* Cache friendliness
* Code simplicity and readability

**Library Usage**

The `Float32Array` object is used in Test Case 2 (TypedArray (byte-aligned AoS)), which provides a typed array implementation of floating-point numbers. The `Uint16Array` and `DataView` objects are used in all test cases, but their primary purpose is to provide an interface for working with unsigned integers and binary data.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. All code uses standard JavaScript features, such as typed arrays, DataViews, and loops.

**Alternatives**

If you're interested in exploring alternative approaches, consider the following options:

* **Array Buffers**: Instead of using TypedArrays or DataViews, you can use native array buffers to store binary data.
* **Native Web Workers**: You can write worker threads to perform calculations on separate threads, potentially improving performance by utilizing multiple CPU cores.
* **Other libraries and frameworks**: Depending on your specific requirements, you might consider using libraries like `webworker-threads` or frameworks that provide optimized execution environments for JavaScript code.

Keep in mind that each alternative has its own trade-offs and may not always be suitable for every use case.

Related benchmarks:

Buffer Filling (version: 0)

Comparing performance of: DataView (AoS) vs TypedArray (byte-aligned AoS) vs TypedArray (SoA)

Created: 2 years ago by: Guest

Jump to the latest result

DataView (AoS)

TypedArray (byte-aligned AoS)

TypedArray (SoA)

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