Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Buffer Filling 2
(version: 0)
Comparing performance of:
DataView (AoS) vs TypedArray (byte-aligned AoS) vs TypedArray (SoA)
Created:
4 years ago
by:
Guest
Jump to the latest result
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>
Run tests (3)
Previous results
Fork
Test case name
Result
DataView (AoS)
TypedArray (byte-aligned AoS)
TypedArray (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):
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:
Dataview vs Custom - Read double
Buffer Filling
Buffer Access
Buffer Access 2
Buffer Access 4
Comments
Confirm delete:
Do you really want to delete benchmark?