Benchmark: Buffer Access 3 - MeasureThat.net

Script Preparation code:

var bench1buffer;
var bench2buffer;
var bench3buffer;
var size = 1_000_000;
{
    const stride = 10;
    bench1buffer = new ArrayBuffer(stride * size);
    /*
      0 u16 id
      2 f32 x
      6 f32 y
    */
    for (let i = 0; i < size; i++) {
        const struct = new DataView(bench1buffer, i * stride, stride);
        struct.setUint16(0, i, true);
        struct.setFloat32(2, i, true);
        struct.setFloat32(6, i * 2, true);
    }
}
{
    const stride = 12;
    bench2buffer = new ArrayBuffer(stride * size);
    /*
      0 u16 id
      4 f32 x
      8 f32 y
    */
    for (let i = 0; i < size; i++) {
        const struct = new DataView(bench2buffer, i * stride, stride);
        struct.setUint16(0, i, true);
        struct.setFloat32(4, i, true);
        struct.setFloat32(8, i * 2, true);
    }
}
{
    bench3buffer = {
        id: new Uint16Array(size),
        x: new Float32Array(size),
        y: new Float32Array(size),
    };
    for (let i = 0; i < size; i++) {
        bench3buffer.id[i] = i;
        bench3buffer.x[i] = i;
        bench3buffer.y[i] = i * 2;
    }
}

Tests:

DataView AoS
const stride = 10; /* 0 u16 id 2 f32 x 6 f32 y */ const view = new DataView(bench1buffer); let sum = 0; for (let i = 0; i < size; i++) { const offset = i * stride; const id = view.getUint16(offset, true); const x = view.getFloat32(offset + 2, true); const y = view.getFloat32(offset + 6, true); sum += id + x * y; } console.log(1, sum);
DataView byte-aligned AoS
const stride = 12; /* 0 u16 id 4 f32 x 8 f32 y */ const view = new DataView(bench2buffer); let sum = 0; for (let i = 0; i < size; i++) { const offset = i * stride; const id = view.getUint16(offset, true); const x = view.getFloat32(offset + 4, true); const y = view.getFloat32(offset + 8, true); sum += id + x * y; } console.log(2, sum);
TypedArray byte-aligned AoS
const stride = 12; /* 0 u16 id 4 f32 x 8 f32 y */ const f32s = new Float32Array(bench2buffer); const u16s = new Uint16Array(bench2buffer); let sum = 0; for (let i = 0; i < size; i++) { const offset = i * stride; const id = u16s[offset / 2]; const x = f32s[offset / 4 + 1]; const y = f32s[offset / 4 + 2]; sum += id + x * y; } console.log(3, sum);
TypeArray SoA
let sum = 0; for (let i = 0; i < size; i++) { const id = bench3buffer.id[i]; const x = bench3buffer.x[i]; const y = bench3buffer.y[i]; sum += id + x * y; } console.log(3, sum);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DataView AoS
DataView byte-aligned AoS
TypedArray byte-aligned AoS
TypeArray SoA

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches for accessing data in arrays.

**Benchmark Definition**

The provided benchmark definition json represents a set of three test cases:

1. `DataView AoS` (Accessed Once Steamed): This approach accesses data using a single `DataView` object, where each element is accessed only once.
2. `DataView byte-aligned AoS`: This approach accesses data using a single `DataView` object, but with an additional optimization that aligns the elements in memory to access them more efficiently.
3. `TypedArray byte-aligned AoS`: This approach uses typed arrays (e.g., `Float32Array`) and accesses data by dividing the offset into two parts: one for each element's type.

**Comparison of Approaches**

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

1. **DataView AoS**: Pros:
	* Simple to implement.
	* Fast initialization.
Cons:
	* Each access incurs a significant overhead due to the `getUint16` and `parseFloat32` methods, which can be slow for large datasets.
2. **DataView byte-aligned AoS**: Pros:
	* Optimized for memory access patterns where elements are accessed sequentially or with a fixed stride.
Cons:
	* Requires additional bookkeeping to manage the alignment, which can add overhead.
3. **TypedArray byte-aligned AoS**: Pros:
	* Optimized for memory access patterns where elements have different types (e.g., `Float32Array` and `Uint16Array`).
	* Can be faster than `DataView` due to reduced function call overhead.

**Benchmark Results**

The latest benchmark results show that:

1. **TypeArray SoA** is the fastest approach, with an average of 414 executions per second.
2. **DataView byte-aligned AoS** is slightly slower, with an average of 279 executions per second.
3. **TypedArray byte-aligned AoS** is faster than `DataView` but slower than `TypeArray SoA`, with an average of 256 executions per second.

In summary, the choice of approach depends on the specific use case and memory access patterns. If simplicity and fast initialization are more important than raw performance, `DataView AoS` might be a good choice. However, if optimized memory access is crucial, `TypedArray byte-aligned AoS` or `DataView byte-aligned AoS` might be better options.

Related benchmarks:

Buffer Access 3 (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

DataView AoS

DataView byte-aligned AoS

TypedArray byte-aligned AoS

TypeArray SoA

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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