Run results for: Maping BooleanArray vs uInt8 Array2 vs uint8 with bitMasking _2

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.

Run details:

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: Safari 18

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

weird boolean - .fill

73.6M/s

uint8 .fill()

52.9M/s

weird boolean - Strict

12.9M/s

typed Array with uInt8

2.2M/s

typed Array with uInt8 - Strict

2.2M/s

boolean array

796K/s

boolean array - Strict

718K/s

View exact numbers

Test name	Executions per second
✓ weird boolean - .fill	73,618,520 Ops/sec
uint8 .fill()	52,906,320 Ops/sec
weird boolean - Strict	12,857,642 Ops/sec
typed Array with uInt8	2,178,973 Ops/sec
typed Array with uInt8 - Strict	2,161,385 Ops/sec
boolean array	796,062 Ops/sec
boolean array - Strict	717,859 Ops/sec

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

Tests:

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