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: 6 years ago by: Registered User

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

​x
 
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); });
const resultArray = numericArray.map(s => {
return (s == 1);
});
Float64Array
const resultArray = f64View.map(s => { return (s == 1); });
const resultArray = f64View.map(s => {
return (s == 1);
});
Float32Array
const resultArray = f32View.map(s => { return (s == 1); });
const resultArray = f32View.map(s => {
return (s == 1);
});

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
numeric array
Float64Array
Float32Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
numeric array	183934.2 Ops/sec
Float64Array	181282.2 Ops/sec
Float32Array	188244.4 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

Benchmark Definition:

The benchmark tests the performance difference between three approaches:

Numeric Array: Using the map() method on an array of random true/false values (numericArray).
Float64Array: Using the map() method on a typed array with 8-byte elements ( Float64 type), where each element represents either 0 or 1.
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:

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.
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.
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.

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.

Related benchmarks: