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

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

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested on MeasureThat.net.

**Benchmark Definition**

The provided JSON defines four benchmark tests, each with its own script preparation code and description (although null in this case). The scripts appear to be manipulating hexadecimal color codes by adding alpha transparency. There are four functions:

1. `addAlpha(color, opacity)`: takes a hex color and an opacity value, applies the transparency, and returns the resulting string.
2. `hex2rgba(hex, alpha = 1)`: converts a hex color to RGBA format with a specified alpha value (defaults to 1 if not provided).
3. `adjustHexOpacity(color, opacity)`: adjusts the given hex color by adding the specified opacity as an alpha channel.
4. `setOpacity(hex, alpha)`: adds the specified opacity as an alpha channel to the input hex color.

**Options Compared**

The benchmark tests are comparing the performance of these four functions:

1. `addAlpha`
2. `hex2rgba`
3. `adjustHexOpacity`
4. `setOpacity`

Each test is measuring how many executions per second each function can perform on a specific input (e.g., "FF0000" with an opacity value).

**Pros and Cons of Different Approaches**

1. **`addAlpha`**: Simple, direct approach that applies transparency by converting the hex color to a string with the desired opacity. Pros: straightforward, easy to understand. Cons: may not be optimized for performance or edge cases.
2. **`hex2rgba`**: Converts the input hex color to RGBA format, which may introduce additional overhead due to string manipulation and parsing. Pros: allows for more flexible alpha values. Cons: may incur unnecessary computations.
3. **`adjustHexOpacity`**: Adds transparency by manipulating the individual red, green, and blue components of the hex color. This approach is more complex than `addAlpha`. Pros: could be optimized for performance if implemented correctly. Cons: has more steps, which might increase overhead.
4. **`setOpacity`**: Concatenates the original hex color with a modified alpha channel (using multiplication and string formatting). This approach seems less straightforward than others. Pros: efficient in terms of memory usage? Cons: unclear without further analysis.

**Special JS Features/Syntax**

None mentioned explicitly, but it's worth noting that MeasureThat.net is testing vanilla JavaScript functions, not ES6+ features or modern syntax.

**Library Usage**

None mentioned.

**Other Alternatives**

If you were to implement these tests from scratch, you could consider the following alternatives:

* Using WebAssembly (WASM) benchmarks for performance comparison.
* Utilizing frameworks like Benchmark.js or jsperf for more comprehensive benchmarking and analysis.
* Employing profiling tools like Chrome DevTools or Node.js Inspector for deeper insights into execution times.

Keep in mind that these alternatives would require additional setup and expertise. MeasureThat.net's pre-configured benchmarks provide a convenient way to quickly compare performance across different JavaScript functions.

Related benchmarks:

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

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