Benchmark: Maping numeric vs f32 vs f64 with add

Maping numeric vs f32 vs f64 with add (version: 0)

compare the map speed of an array of random true/false values compared to an ArrayBuffer with a uInt8 view of 0 or 1. The results are that the typed array is much much faster. There are two possible reasons I can think of for this. 1) JavaScript boolean type size of 4Bytes where as an element of a uInt8 array is actually 1Byte. 2) The ArrayBuffer is allocating contiguous memory resulting in a better cache hit ratio.

Comparing performance of: numeric array vs Float64Array vs Float32Array

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

const size = 1024;

var buffer64 = new ArrayBuffer(size*8);
var buffer32 = new ArrayBuffer(size*4);
var f64View = new Float32Array(buffer64, 0, size);
var f32View = new Float32Array(buffer32, 0, size);

var numericArray = [];
for (let i=0; i<size; i++) {
  const someVal = Math.random();
  numericArray[i] = someVal;
  f64View[i] = someVal;
  f32View[i] = someVal;
}

Tests:

numeric array
const resultArray = numericArray.map(s => { return (s +1); });
Float64Array
const resultArray = f64View.map(s => { return (s +1); });
Float32Array
const resultArray = f32View.map(s => { return (s +1); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
numeric array
Float64Array
Float32Array

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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of mapping operations on different data structures in JavaScript:

* **`numericArray`**: A standard JavaScript array containing random boolean values (represented as 0s and 1s).

* **`f64View`**: An `Float64Array`, a Typed Array representing numbers with 64 bits of precision, backed by an `ArrayBuffer`.
* **`f32View`**: An `Float32Array`, a Typed Array representing numbers with 32 bits of precision, also backed by an `ArrayBuffer`.

**What is being measured?**

The benchmark measures the execution time (inversely: executions per second) required to apply a simple mapping function (`s => s + 1`) to each element of these arrays. This simulates a common operation like transforming data within a program.

**Pros and Cons:**

* **`numericArray`**: 
    * **Con:**  Slower due to potential type conversions and overhead associated with managing JavaScript's dynamic array structure.
* **`Float64Array`/`Float32Array`**:
    * **Pro:** Significantly faster because they:
        * Use tightly packed data in contiguous memory locations (arrays backed by `ArrayBuffer`), leading to better cache utilization. 
        * Have a fixed size and type, allowing the JavaScript engine to optimize memory allocation and access patterns.

**Why Typed Arrays?**

Typed arrays are specialized data structures designed for efficient numerical operations in JavaScript. They offer:

* **Performance:** Faster than native JavaScript arrays for numeric tasks due to contiguous memory layout and optimized internal representations.
* **Deterministic Size:**  Each element has a fixed size (e.g., 32 bits for `Float32Array`), simplifying memory management.

**Alternatives:**

While not directly compared in this benchmark, other alternatives for data transformation could include:

* **Iterators/For Loops**: More explicit but often less efficient than array methods like `map`.
* **Libraries**: Libraries like Lodash offer optimized functions for array manipulation.

Let me know if you have any more questions about the benchmark or JavaScript performance in general!

Related benchmarks: