Benchmark: Maping numeric vs f32 vs f64

Maping numeric vs f32 vs f64 (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: 7 years ago by: Registered User

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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Firefox 6 runs

numeric array

150K/s

Float32Array

102K/s

Float64Array

98K/s

Fastest: numeric array (1.5x faster)

View exact numbers

✓ numeric array: 150,382 ops/sec
• Float32Array: 101,591 ops/sec
• Float64Array: 98,357 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 26_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/145.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 26 on iOS 26.1

View result in a separate tab

numeric array

246K/s

Float64Array

56K/s

Float32Array

56K/s

View exact numbers

Test name	Executions per second
✓ numeric array	246,336 Ops/sec
Float64Array	55,917 Ops/sec
Float32Array	55,682 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition:**

The benchmark tests the performance difference between three approaches:

1. **Numeric Array**: Using the `map()` method on an array of random true/false values (`numericArray`).
2. **Float64Array**: Using the `map()` method on a typed array with 8-byte elements ( Float64 type), where each element represents either 0 or 1.
3. **Float32Array**: Using the `map()` method on a typed array with 4-byte elements (Float32 type).

**What is tested:**

The benchmark measures the execution speed of the `map()` method for each approach, comparing the number of executions per second.

**Options compared:**

* **Data Type**: The choice between an array of true/false values and a typed array ( Float64 or Float32) with either 8-byte or 4-byte elements.
* **Memory Layout**: The memory layout of the data structures used in each approach. In this case, the typed arrays have contiguous memory allocation, which might lead to better cache performance.

**Pros and Cons:**

1. **Numeric Array**:
	* Pros: Simple to set up, easy to understand.
	* Cons: Might be slower due to JavaScript's boolean type being 4 bytes, leading to more cache misses.
2. **Float64Array**:
	* Pros: Can take advantage of the smaller memory footprint and potentially better cache performance.
	* Cons: Requires setting up a typed array with Float64 elements, which might require additional code.
3. **Float32Array**:
	* Pros: Similar to Float64Array but with an even smaller memory footprint.
	* Cons: Requires setting up a typed array with Float32 elements, similar to Float64Array.

**Library and Purpose:**

The `map()` method is a built-in JavaScript function that applies a specified transformation to each element of an array. In this benchmark, the `map()` method is used to create a new array with the same number of elements as the original array, but with transformed values (either true or false).

**Special JS feature:**

There are no special JavaScript features mentioned in the benchmark definition.

**Other alternatives:**

To further compare the performance of these approaches, other variations could be tested:

* Using `forEach()` instead of `map()`.
* Using a different data structure, such as an `ArrayBuffer` with a Uint8Array view.
* Comparing the performance of different JavaScript engines or browsers.

Keep in mind that the specific options and alternatives will depend on the goals of the benchmark.

Maping numeric vs f32 vs f64 (version: 0)

Comparing performance of: numeric array vs Float64Array vs Float32Array

Created: 7 years ago by: Registered User

Go to the latest result

numeric array

Float64Array

Float32Array

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `numeric array vs Float64Array vs Float32Array`