Benchmark: Add alpha color v3

Script Preparation code:

function addAlpha(color, opacity) {
    // coerce values so ti is between 0 and 1.
    const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
    return color + _opacity.toString(16).toUpperCase();
}

function hex2rgba(hex, alpha = 1) {
  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
  return `rgba(${r},${g},${b},${alpha})`;
}

function adjustHexOpacity(color, opacity) {
  const r = parseInt(color.slice(1, 3), 16);
  const g = parseInt(color.slice(3, 5), 16);
  const b = parseInt(color.slice(5, 7), 16);

  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';
}

function setOpacity(hex, alpha) {
  return `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, 0)}`;
}

Tests:

addAlpha
addAlpha('FF0000', 0.5);
hex2rgba
hex2rgba('FF0000', 0.5);
adjustHexOpacity
adjustHexOpacity('FF0000', 0.5);
setOpacity
setOpacity('FF0000', 0.5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
addAlpha
hex2rgba
adjustHexOpacity
setOpacity

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36

Browser/OS: Chrome 99 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
addAlpha	3846400.0 Ops/sec
hex2rgba	1706861.0 Ops/sec
adjustHexOpacity	3348020.0 Ops/sec
setOpacity	8674132.0 Ops/sec

Add alpha color v3 (version: 0)

Comparing performance of: addAlpha vs hex2rgba vs adjustHexOpacity vs setOpacity

Created: 2 years ago by: Guest

Jump to the latest result

addAlpha

hex2rgba

adjustHexOpacity

setOpacity

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A