Benchmark: Test: CSS calc() with var() -- 02

Test: CSS calc() with var() -- 02 (version: 2)

Test difference in performance with calc() and var() functions compared with simple units. Test on unitless, percentage and absolute values.

Comparing performance of: var(unitless) + calc() + % vs var(%) vs Percentage vs var(unitless) + calc() + px vs px vs var(px) vs %+ calc() vs px + calc()

Created: 2 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<section id="section"></section>

Script Preparation code:

const section = document.getElementById("section");

section.style.setProperty('--translation', '100');
section.style.setProperty('--translationPx', '100px');
section.style.setProperty('--translationPercentage', '100%');


for (var i = 0; i < 1000; i++) {
    const newDiv = document.createElement("div");
    const text = document.createTextNode(`${i}`);
    newDiv.appendChild(text);
    section.appendChild(newDiv);
}

var nodes = document.querySelectorAll("div");

Tests:

var(unitless) + calc() + %
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(var(--translation) * 1%))" }
var(%)
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(var(--translationPercent))" }
Percentage
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(100%)" }
var(unitless) + calc() + px
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(var(--translation) * 1px))" }
px
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(100px)" }
var(px)
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(var(--translationPx))" }
%+ calc()
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(100% * 1))" }
px + calc()
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(100px * 1))" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
var(unitless) + calc() + %
var(%)
Percentage
var(unitless) + calc() + px
px
var(px)
%+ calc()
px + calc()

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its options, pros and cons, and other considerations.

**Benchmark Overview**

The test case measures the performance of different approaches to calculate the translation value for an element's transform property using CSS calc() functions with var() expressions. The tests compare six scenarios:

1. Unitless values
2. Percentage values
3. Absolute (px) values
4. Combination of unitless and absolute values

**Options Compared**

The options compared are:

* `var(unitless)` + `calc()` + `%` (unitless value with percentage)
* `var(%)` (percentage value only)
* `Percentage` (absolute value of 100%)
* `var(px)` + `calc()` + `px` (absolute value in px with calculation)
* `px` (absolute value in px only)
* Combination of unitless and absolute values (`var(unitless) + calc() + %` and `var(unitless) + calc() + px`)

**Pros and Cons**

Each option has its pros and cons:

1. **Unitless values**: This approach is simple, but may lead to slower performance due to the need for calculations.
2. **Percentage values**: Using a fixed percentage value (100%) can provide better performance than using variables or calculations.
3. **Absolute values**: Using absolute values in px provides better performance than using variables or calculations, as it avoids potential calculation overhead.
4. **Combination of unitless and absolute values**: This approach balances between simplicity and performance.

**Other Considerations**

* The use of `var()` expressions introduces a new variable that needs to be looked up and resolved, which may add overhead.
* Calculating the translation value using `calc()` functions requires more CPU cycles than simple arithmetic operations.
* The test case is designed for Chrome 118, so results may vary across other browsers.

**Best Practice Recommendations**

Based on this benchmark, it's recommended to:

1. Use absolute values in px whenever possible for better performance.
2. Avoid using unitless values or percentage values unless necessary.
3. Optimize `calc()` function calculations by reducing the number of operations or using more efficient algorithms.
4. Consider caching or memoizing variable values to reduce lookups.

Keep in mind that this is a benchmark specific to Chrome 118, and results may vary across other browsers and environments.

Related benchmarks: