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: one year ago by: Registered User

Jump to the latest result

HTML Preparation code:

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

AخA
 
<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");

​x
 
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%))" }
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))"
}

 
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%)"
}

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

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

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
var(unitless) + calc() + %	1192.6 Ops/sec
var(%)	1301.0 Ops/sec
Percentage	1618.1 Ops/sec
var(unitless) + calc() + px	1181.9 Ops/sec
px	1615.0 Ops/sec
var(px)	1337.2 Ops/sec
px + calc()	1202.6 Ops/sec
% + calc()	1232.4 Ops/sec

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

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:

Unitless values
Percentage values
Absolute (px) values
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:

Unitless values: This approach is simple, but may lead to slower performance due to the need for calculations.
Percentage values: Using a fixed percentage value (100%) can provide better performance than using variables or calculations.
Absolute values: Using absolute values in px provides better performance than using variables or calculations, as it avoids potential calculation overhead.
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:

Use absolute values in px whenever possible for better performance.
Avoid using unitless values or percentage values unless necessary.
Optimize calc() function calculations by reducing the number of operations or using more efficient algorithms.
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.

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**

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: