Benchmarking RGBA extraction from integer




I bought a case I ought to convert integer RGBA worth to RGBA object. I in contrast the pace of two methods. I bought attention-grabbing outcomes. So I report right here!

An array of integers (e.g. 0xFF0000FF) is given and I must extract RGBA parameters individually.

Converts the colour array to Uint8Array in bulk and will get by indexes.

const array = new Uint8Array(new Uint32Array(colours).buffer)
const len = colours.size
const outcomes = []
for (let i = 0; i < len; i++) {
  const a = array[4 * i]
  const b = array[4 * i + 1]
  const g = array[4 * i + 2]
  const r = array[4 * i + 3]
  outcomes.push({
    r, g, b, a
  })
}
return outcomes
Enter fullscreen mode

Exit fullscreen mode

Merely makes use of a loop and apply bitmask and bit shifting.

const len = colours.size
const outcomes = []
for (let i = 0; i < len; i++) {
  const c = colours[i]
  const r = (c & 0xFF000000) >> 24
  const g = (c & 0x00FF0000) >> 16
  const b = (c & 0x0000FF00) >> 8
  const a = c & 0x000000FF
  outcomes.push({
    r, g, b, a
  })
}
Enter fullscreen mode

Exit fullscreen mode

I ready 4 varieties of knowledge.

  • HD: 1280 x 720
  • Full HD: 1920 x 1080
  • 4K: 3840 x 2160
  • 8K: 7680 x 4320

I measured in 2 platforms Node.js and Chrome browser. I ran the identical course of ten occasions. The end result quantity is in milli seconds. In Node.js, the bitmask technique all the time wins. Nevertheless, in browser, UnitArray technique all the time wins!😂

Node.js (14.16.0 on Home windows 10)

UintArray Bitmask
HD 1501 556
full HD 3367 1379
4K 13706 4668
8K 71298 20553

Chrome browser (94.0.4606.81)

UintArray Bitmask
HD 546 851
full HD 939 1990
4K 3209 9157
8K 11872 42438



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Benchmarking #RGBA #extraction #integer