Benchmark: Buffer Access 2 - const arrays

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

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

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

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

 
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;
const idbuf = bench3buffer.id;
const xbuf = bench3buffer.x;
const ybuf = bench3buffer.y;
for (let i = 0; i < size; i++) {
  const id = idbuf[i];
  const x = xbuf[i];
  const y = ybuf[i];
  sum += id + x * y;
}
console.log(3, sum);

 
let sum = 0;const idbuf = bench3buffer.id;const xbuf = bench3buffer.x;const ybuf = bench3buffer.y;for (let i = 0; i < size; i++) {  const id = idbuf[i];  const x = xbuf[i];  const y = ybuf[i];  sum += id + x * y;}console.log(3, sum);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 3 years ago)

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

Browser/OS: Chrome 98 on Windows

View result in a separate tab

Test name	Executions per second
DataView AoS	3.0 Ops/sec
DataView byte-aligned AoS	3.0 Ops/sec
TypedArray byte-aligned AoS	14.9 Ops/sec
TypeArray SoA	14.9 Ops/sec

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

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

Benchmark Overview

The benchmark measures the performance of accessing data in various formats: Array of Structures (AoS), DataView AoS, TypedArray byte-aligned AoS, and TypeArray SoA. Each test case accesses a large array of 1 million elements with different stride sizes (10, 12, and 12).

What's being tested

The benchmark tests the performance of accessing data in different formats:

DataView AoS: The original approach using DataView to access each element individually. This is compared to other approaches.
TypedArray byte-aligned AoS: A more efficient approach using Float32Array and Uint16Array with optimized indexing for byte-aligned access.
TypeArray SoA: Accessing data in a Store-of-Arrays (SoA) format, where each type (e.g., id, x, y) is stored separately.

Comparison of approaches

The benchmark compares the performance of three main approaches:

DataView AoS: This approach uses DataView to access each element individually. The pros are:
- Simple implementation.
- No memory allocation or copying overhead. However, the cons are:
- Slower performance due to individual element access.
TypedArray byte-aligned AoS: This approach uses Float32Array and Uint16Array with optimized indexing for byte-aligned access. The pros are:
- Faster performance due to optimized memory access.
- Less overhead compared to DataView. However, the cons are:
- Requires more memory allocation and copying overhead.
TypeArray SoA: Accessing data in a Store-of-Arrays (SoA) format, where each type is stored separately. The pros are:
- Potential for better cache locality and performance.
- Can be more efficient for certain types of data.

Benchmark Results

The latest benchmark results show the performances of each approach:

TestName	ExecutionsPerSecond
TypeArray SoA	14.944602012634277
TypedArray byte-aligned AoS	14.940752029418945
DataView byte-aligned AoS	3.0188679695129395
DataView AoS	3.0090270042419434

The results indicate that the TypeArray SoA approach is the fastest, followed closely by TypedArray byte-aligned AoS. The original DataView approaches are significantly slower.

Conclusion

In conclusion, the benchmark highlights the importance of choosing the right data access pattern and memory layout for performance-critical applications. While DataView AoS is simple to implement, it's slower than other optimized approaches like TypedArray byte-aligned AoS and TypeArray SoA. By understanding the trade-offs between these approaches, developers can make informed decisions about which one to use based on their specific requirements.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

**What's being tested**

The benchmark tests the performance of accessing data in different formats:

* **DataView AoS**: The original approach using `DataView` to access each element individually. This is compared to other approaches.
* **TypedArray byte-aligned AoS**: A more efficient approach using `Float32Array` and `Uint16Array` with optimized indexing for byte-aligned access.
* **TypeArray SoA**: Accessing data in a Store-of-Arrays (SoA) format, where each type (e.g., `id`, `x`, `y`) is stored separately.

**Comparison of approaches**

The benchmark compares the performance of three main approaches:

1. **DataView AoS**: This approach uses `DataView` to access each element individually. The pros are:
	* Simple implementation.
	* No memory allocation or copying overhead.
However, the cons are:
	* Slower performance due to individual element access.
2. **TypedArray byte-aligned AoS**: This approach uses `Float32Array` and `Uint16Array` with optimized indexing for byte-aligned access. The pros are:
	* Faster performance due to optimized memory access.
	* Less overhead compared to `DataView`.
However, the cons are:
	* Requires more memory allocation and copying overhead.
3. **TypeArray SoA**: Accessing data in a Store-of-Arrays (SoA) format, where each type is stored separately. The pros are:
	* Potential for better cache locality and performance.
	* Can be more efficient for certain types of data.

**Benchmark Results**

The latest benchmark results show the performances of each approach:

| TestName | ExecutionsPerSecond |
| --- | --- |
| TypeArray SoA | 14.944602012634277 |
| TypedArray byte-aligned AoS | 14.940752029418945 |
| DataView byte-aligned AoS | 3.0188679695129395 |
| DataView AoS | 3.0090270042419434 |

The results indicate that the TypeArray SoA approach is the fastest, followed closely by TypedArray byte-aligned AoS. The original DataView approaches are significantly slower.

**Conclusion**

Related benchmarks:

Buffer Access 2 - const arrays (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