Benchmark: Buffer Filling 2

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, 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; rv:97.0) Gecko/20100101 Firefox/97.0

Browser/OS: Firefox 97 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
DataView (AoS)	5723.8 Ops/sec
TypedArray (byte-aligned AoS)	70534.7 Ops/sec
TypedArray (SoA)	118202.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for optimizing code and identifying bottlenecks. The provided benchmark measures the execution speed of three different approaches: using `DataView` with Array Of Elements (AoS), `TypedArray` with byte-aligned AoS, and `TypedArray` with Structure Of Arrays (SoA).

**DataView (AoS)**

This approach uses a single `DataView` object to store both the integer IDs and floating-point values. The `setUint16` and `setFloat32` methods are used to set the values in the buffer.

Pros:

* Simple and easy to implement
* Does not require creating separate arrays for each type of data

Cons:

* May incur performance penalties due to frequent access and modification of the same memory location
* Can lead to caching issues, as the browser may cache the entire buffer instead of individual elements

**TypedArray (byte-aligned AoS)**

This approach uses two `TypedArray` objects: one for the integer IDs (`Uint16Array`) and another for the floating-point values (`Float32Array`). Each array is stored in a separate byte-aligned chunk within the same `ArrayBuffer`.

Pros:

* Offers better performance compared to `DataView (AoS)` due to reduced cache access and modification
* Takes advantage of optimized `TypedArray` operations

Cons:

* Requires creating two separate arrays, which can increase memory allocation and deallocation overhead
* May lead to additional computational overhead due to array indexing and bounds checking

**TypedArray (SoA)**

This approach stores the integer IDs, floating-point values, and another value in a single array. Each element is stored at its calculated offset, making it a SoA arrangement.

Pros:

* Simplifies memory access patterns, reducing cache misses and page faults
* May offer better performance due to reduced computational overhead from bounds checking

Cons:

* Can lead to increased memory usage and allocation overhead compared to AoS arrangements
* May result in higher computational overhead when accessing elements at specific offsets

In the provided benchmark results, `TypedArray (SoA)` outperforms both `DataView (AoS)` and `TypedArray (byte-aligned AoS)`, indicating that this arrangement is likely the most efficient for this particular test case.

Other alternatives to consider:

* Using a single, large `Float64Array` instead of separate `Float32Array`s
* Utilizing SIMD instructions or WebAssembly for improved performance on modern hardware
* Employing various memory layout and caching strategies, such as using a cache-friendly structuring
* Implementing specialized optimized algorithms or data structures tailored to the specific use case

Keep in mind that the optimal approach may vary depending on the specific requirements and constraints of your project.

Related benchmarks:

Buffer Filling 2 (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):