Benchmark: Maping BooleanArray vs uInt8 Array2 vs uint8 with bitMasking _2

Maping BooleanArray vs uInt8 Array2 vs uint8 with bitMasking _2 (version: 4)

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: boolean array vs typed Array with uInt8 vs boolean array - Strict vs typed Array with uInt8 - Strict vs weird boolean - Strict vs uint8 .fill() vs weird boolean - .fill

Created: 6 years ago by: Registered User

Jump to the latest result

Script Preparation code:

const size = 1024;

var buffer = new ArrayBuffer(size);
var u8View = new Uint8Array(buffer, 0, size);

var buffer2 = new ArrayBuffer(size);
var u8BoolView = new Uint8Array(buffer2, 0, size/8);

var booleanArray = [];
for (let i=0; i<size; i++) {
  const someVal = Math.random()*1;
  //typed array stores (0 or 1)
  u8View[i] = someVal;
  //boolean array stores (false or true)
  booleanArray.push(someVal == 1);
}

for (let i=0; i<size/8; i++) {
  let some256Val = Math.random()*255;
  for (let j=0; j<8; j++) { 
  }
  let FLAG_A = some256Val &= 128;
  let FLAG_B = some256Val &= 64;
  let FLAG_C = some256Val &= 32;
  let FLAG_D = some256Val &= 16;
  let FLAG_E = some256Val &= 8;
  let FLAG_F = some256Val &= 4;
  let FLAG_G = some256Val &= 2;
  let FLAG_H = some256Val &= 1;
  u8BoolView[i] = (FLAG_A | FLAG_B | FLAG_C | FLAG_D | FLAG_E | FLAG_F | FLAG_G | FLAG_H);
}

​x
 
const size = 1024;​var buffer = new ArrayBuffer(size);var u8View = new Uint8Array(buffer, 0, size);​var buffer2 = new ArrayBuffer(size);var u8BoolView = new Uint8Array(buffer2, 0, size/8);​var booleanArray = [];for (let i=0; i<size; i++) {  const someVal = Math.random()*1;  //typed array stores (0 or 1)  u8View[i] = someVal;  //boolean array stores (false or true)  booleanArray.push(someVal == 1);}​for (let i=0; i<size/8; i++) {  let some256Val = Math.random()*255;  for (let j=0; j<8; j++) {   }  let FLAG_A = some256Val &= 128;  let FLAG_B = some256Val &= 64;  let FLAG_C = some256Val &= 32;  let FLAG_D = some256Val &= 16;  let FLAG_E = some256Val &= 8;  let FLAG_F = some256Val &= 4;  let FLAG_G = some256Val &= 2;  let FLAG_H = some256Val &= 1;  u8BoolView[i] = (FLAG_A | FLAG_B | FLAG_C | FLAG_D | FLAG_E | FLAG_F | FLAG_G | FLAG_H);}​​​​

Tests:

boolean array
const resultArray = booleanArray.map(s => { return (s == 1); });
const resultArray = booleanArray.map(s => {
return (s == 1);
});
typed Array with uInt8
const resultArray = u8View.map(s => { return (s == 1); });
const resultArray = u8View.map(s => {
return (s == 1);
});
boolean array - Strict
'use strict'; const resultArray = booleanArray.map(s => { return (s == 1); });
'use strict';
const resultArray = booleanArray.map(s => {
return (s == 1);
});
typed Array with uInt8 - Strict
'use strict'; const resultArray = u8View.map(s => { return (s == 1); });
'use strict';
const resultArray = u8View.map(s => {
return (s == 1);
});
weird boolean - Strict
'use strict'; const resultArray = u8BoolView.map(s => { return ((s &= 128) == 1); });
'use strict';
const resultArray = u8BoolView.map(s => {
return ((s &= 128) == 1);
});
uint8 .fill()
const resultArray = u8View.fill(1);
const resultArray = u8View.fill(1);
weird boolean - .fill
const resultArray = u8BoolView.fill(255);
const resultArray = u8BoolView.fill(255);

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
boolean array
typed Array with uInt8
boolean array - Strict
typed Array with uInt8 - Strict
weird boolean - Strict
uint8 .fill()
weird boolean - .fill

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
boolean array	796062.4 Ops/sec
typed Array with uInt8	2178973.2 Ops/sec
boolean array - Strict	717859.2 Ops/sec
typed Array with uInt8 - Strict	2161385.0 Ops/sec
weird boolean - Strict	12857642.0 Ops/sec
uint8 .fill()	52906320.0 Ops/sec
weird boolean - .fill	73618520.0 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 6 months ago):

Let's break down what is being tested and analyzed.

Benchmark Definition

The benchmark compares the performance of different approaches to creating an array of boolean values, specifically:

Using a BooleanArray (an array of booleans)
Using a typed array (Uint8Array) with a view on a Buffer object
Using a typed array (Uint8Array) with a specific bitmasking approach

Test Cases

The individual test cases compare the performance of these approaches under different conditions:

"boolean array" - Creating an array of boolean values using a BooleanArray
"typed Array with uInt8" - Creating an array of boolean values using a typed array (Uint8Array) with a view on a Buffer object
"boolean array - Strict" and "typed Array with uInt8 - Strict" - The same test cases as above, but running in strict mode (using 'use strict';)
"weird boolean" - Creating an array of boolean values using the bitmasking approach on a typed array (Uint8Array) with a specific mask
"uint8 .fill()" and "weird boolean - .fill" - Filling arrays of size 1024 with values (1 for uint8 .fill() and 255 for weird boolean - .fill)

Library

No external libraries are used in this benchmark.

Special JS feature or syntax

The only special JavaScript feature used is the bitmasking approach, which is demonstrated in the "weird boolean" test case. This involves using bitwise operations (&, |) to create a mask and apply it to an array of values.

Analysis

The results show that using a typed array (Uint8Array) with a view on a Buffer object (test cases 2, 5) is significantly faster than using a BooleanArray (test case 1). The bitmasking approach ("weird boolean" test cases) also shows good performance.

However, running in strict mode (using 'use strict';) seems to have a negative impact on performance for all test cases except "weird boolean - .fill".

It's worth noting that these results are specific to the browser and device being tested (Firefox 128 on Windows Desktop).

LLMs can make mistakes. Check important info.

Let's break down what is being tested and analyzed.

**Benchmark Definition**

The benchmark compares the performance of different approaches to creating an array of boolean values, specifically:

1. Using a `BooleanArray` (an array of booleans)
2. Using a typed array (`Uint8Array`) with a view on a `Buffer` object
3. Using a typed array (`Uint8Array`) with a specific bitmasking approach

**Test Cases**

The individual test cases compare the performance of these approaches under different conditions:

1. "boolean array" - Creating an array of boolean values using a `BooleanArray`
2. "typed Array with uInt8" - Creating an array of boolean values using a typed array (`Uint8Array`) with a view on a `Buffer` object
3. "boolean array - Strict" and "typed Array with uInt8 - Strict" - The same test cases as above, but running in strict mode (using `'use strict';`)
4. "weird boolean" - Creating an array of boolean values using the bitmasking approach on a typed array (`Uint8Array`) with a specific mask
5. "uint8 .fill()" and "weird boolean - .fill" - Filling arrays of size 1024 with values (1 for `uint8 .fill()` and 255 for `weird boolean - .fill`)

**Library**

No external libraries are used in this benchmark.

**Special JS feature or syntax**

The only special JavaScript feature used is the bitmasking approach, which is demonstrated in the "weird boolean" test case. This involves using bitwise operations (`&`, `|`) to create a mask and apply it to an array of values.

**Analysis**

The results show that using a typed array (`Uint8Array`) with a view on a `Buffer` object (test cases 2, 5) is significantly faster than using a `BooleanArray` (test case 1). The bitmasking approach ("weird boolean" test cases) also shows good performance.

However, running in strict mode (using `'use strict';`) seems to have a negative impact on performance for all test cases except "weird boolean - .fill".

It's worth noting that these results are specific to the browser and device being tested (Firefox 128 on Windows Desktop).

Related benchmarks: