Benchmark: CSS calc() + var() test

CSS calc() + var() test (version: 0)

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 var(px) + calc() vs var(%) + calc()

Created: 2 years ago by: Guest

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))" }
var(px) + calc()
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(var(--translationPx) * 1))" }
var(%) + calc()
for (var i = 0; i < nodes.length; i++) { nodes[i].style = "transform: translateY(calc(var(--translationPercent) * 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)
var(px) + calc()
var(%) + calc()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
var(unitless) + calc() + %	1692.3 Ops/sec
var(%)	1969.3 Ops/sec
Percentage	2708.1 Ops/sec
var(unitless) + calc() + px	1602.2 Ops/sec
px	2596.5 Ops/sec
var(px)	1973.8 Ops/sec
var(px) + calc()	1678.1 Ops/sec
var(%) + calc()	225.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**
The benchmark is designed to measure the performance of CSS calc() and var() functions in JavaScript, specifically when used with different units (unitless, percentage, absolute values).

**Benchmark Definition**
The benchmark definition defines a test case that creates a series of div elements with dynamic styles using calc() and var() functions. The test cases are:

1. `var(unitless) + calc() + %`
2. `var(%) `
3. `Percentage`
4. `var(unitless) + calc() + px`
5. `px`
6. `var(px) `
7. `var(px)  + calc()`
8. `var(%)  + calc()``

**Test Cases**

1. **`var(unitless) + calc() + %`**: This test case uses the var() function with a unitless value and the calc() function with a percentage value. The benchmark measures how fast the browser can apply this style to all div elements.
2. **`var(%) `**: This test case uses only the var() function with a percentage value. The benchmark measures how fast the browser can apply this style to all div elements.
3. **`Percentage`**: This test case uses only the calc() function with a percentage value. The benchmark measures how fast the browser can apply this style to all div elements.
4. **`var(unitless) + calc() + px`**: This test case combines var() and calc() functions with different units (unitless and absolute values). The benchmark measures how fast the browser can apply this style to all div elements.
5. **`px`**: This test case uses only the calc() function with an absolute value (pixel). The benchmark measures how fast the browser can apply this style to all div elements.
6. **`var(px) `**: This test case uses the var() function with a unit of pixel. The benchmark measures how fast the browser can apply this style to all div elements.
7. **`var(px)  + calc()`**: This test case combines the var() and calc() functions with different units (pixel and percentage). The benchmark measures how fast the browser can apply this style to all div elements.
8. **`var(%)  + calc()`**: This test case combines both var() and calc() functions with different units (percentage and absolute values). The benchmark measures how fast the browser can apply this style to all div elements.

**Results**
The provided results show the execution speed of each test case on a Chrome 118 browser running on a Mac OS X 10.15.7 device. The faster execution speed indicates better performance for each test case.

In general, the benchmark suggests that:

* Using var() functions with unitless values is slightly faster than using calc() functions.
* Using calc() functions with percentage values is relatively fast compared to other options.
* Combining different units in var() and calc() functions can lead to slower execution speeds.

Keep in mind that these results are specific to the provided benchmarking scenario and might not be representative of all browsers or use cases.

Related benchmarks: