Benchmark: Buffer Access 2 - 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 */ let sum = 0; for (let i = 0; i < size; i++) { const struct = new DataView(bench1buffer, i * stride, stride); const id = struct.getUint16(0, true); const x = struct.getFloat32(2, true); const y = struct.getFloat32(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 */ let sum = 0; for (let i = 0; i < size; i++) { const struct = new DataView(bench2buffer, i * stride, stride); const id = struct.getUint16(0, true); const x = struct.getFloat32(4, true); const y = struct.getFloat32(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:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
DataView AoS	25.8 Ops/sec
DataView byte-aligned AoS	25.9 Ops/sec
TypedArray byte-aligned AoS	494.8 Ops/sec
TypeArray SoA	1117.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definitions and explain what's being tested, compared options, pros and cons of each approach, library usage, special JavaScript features or syntax, and alternative approaches.

**Benchmark Overview**

The benchmark measures the performance of accessing data in different ways:

1. **DataView AoS (Accessed Sequentially)**: Accessing data in a row-major order using DataView.
2. **DataView byte-aligned AoS**: Accessing data in a row-major order with byte alignment using DataView.
3. **TypedArray byte-aligned AoS**: Accessing data in a column-major order using Float32Array and Uint16Array.
4. **TypeArray SoA (Accessed Sequentially)**: Accessing data in a sequential order using typed arrays.

**Library Usage**

The `DataView` library is used to access the allocated buffers. It provides an efficient way to access memory-mapped files, images, and other binary data.

In the benchmark definitions:

* `DataView` is used to create a view of the buffer.
* The `setUint16`, `setFloat32`, and `getUint16`, `FLOAT32`, methods are used to set and get values in the `DataView`.

**Special JavaScript Features or Syntax**

None specific to performance optimization, but:

* **TypedArrays**: Used for efficient numerical computations.

**Comparison of Approaches**

1. **DataView AoS (Accessed Sequentially)**:
	* Pros: Simple implementation, easy to understand.
	* Cons: May incur more cache misses due to sequential access.
2. **DataView byte-aligned AoS**:
	* Pros: Aligns data with natural boundaries, reducing cache misses.
	* Cons: Requires additional calculations for alignment.
3. **TypedArray byte-aligned AoS**:
	* Pros: Column-major ordering reduces cache misses and improves performance.
	* Cons: More complex implementation due to the need to manage two arrays (Float32Array and Uint16Array).
4. **TypeArray SoA (Accessed Sequentially)**:
	* Pros: Simple implementation, sequential access is natural for typed arrays.
	* Cons: May incur more cache misses due to sequential access.

**Alternative Approaches**

1. **Native Array Buffer**: Instead of using `DataView`, you can use the native array buffer API (`Buffer` class in Node.js or `malloc` in C++).
2. **C++**: Using C++ could provide optimal performance, but requires knowledge of C++ and memory management.
3. **GPU Acceleration**: Using a GPU-accelerated library (e.g., WebGL, CUDA) might be more efficient for certain tasks.

Keep in mind that the choice of approach depends on the specific use case, performance requirements, and the trade-offs between simplicity, maintainability, and performance.

Related benchmarks:

Buffer Access 2 (version: 0)

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

Created: 3 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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