Benchmark: CSS calc() + var()

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

User agent: Mozilla/5.0 (Android 12; Mobile; rv:137.0) Gecko/137.0 Firefox/137.0

Browser/OS: Firefox Mobile 137 on Android

View result in a separate tab

Test name	Executions per second
var(unitless) + calc() + %	172.3 Ops/sec
var(%) + calc()	187.4 Ops/sec
Percentage	312.6 Ops/sec
var(unitless) + calc() + px	169.7 Ops/sec
px	316.9 Ops/sec
var(px) + calc()	178.1 Ops/sec

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

Benchmark Overview

MeasureThat.net provides a web-based platform for creating and running JavaScript microbenchmarks. The provided JSON data represents a benchmark that tests the performance of CSS calc() and var() functions in different scenarios.

What is being tested?

The benchmark compares the performance of four different test cases:

var(unitless) + calc() + %: This test case uses the calc() function with unitless value (100%), percentage unit (%), and absolute units (px).
var(%) + calc(): This test case uses the var() function with percentage unit (%) and calc() function.
Percentage: This test case uses only the percentage unit (%) in both calc() and var() functions.
var(px) + calc(): This test case uses absolute units (px) with calc() function and var() function.

Options compared

The benchmark compares the performance of these four test cases to determine which one is the fastest.

Pros and Cons of different approaches:

Unitless values: Using unitless values in calc() can be more efficient than using absolute units, as it allows for easier calculation and conversion between units.
Percentage units: Using percentage units (e.g., 100%) can simplify calculations and reduce the number of operations required.
Absolute units: Using absolute units (e.g., 100px) requires more calculations and conversions, which can be slower than using unitless or percentage values.

Library used

The benchmark uses JavaScript's built-in calc() and var() functions, as well as HTML5 DOM APIs for creating elements and setting styles.

Special JS features/syntax

None mentioned in the provided JSON data. However, it's worth noting that modern JavaScript engines often use various optimizations, such as:

Just-In-Time (JIT) compilation: JavaScript engines like V8 (used by Chrome/Firefox) can optimize JavaScript code at runtime.
Cache optimization: Some engines may cache frequently accessed values or expressions to improve performance.

Other alternatives

If you're interested in exploring alternative benchmarking platforms, consider:

JSPerf: A popular online platform for creating and running JavaScript benchmarks.
Benchmarker: A Node.js-based benchmarking library that allows you to create custom benchmarks.
Benchmarking frameworks: Such as Benchmark.js or Microbenchmark, which provide a more structured approach to writing benchmarks.

These alternatives offer different features and flexibility levels compared to MeasureThat.net, so it's essential to choose the one that best suits your specific needs.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

**What is being tested?**

The benchmark compares the performance of four different test cases:

1. `var(unitless) + calc() + %`: This test case uses the calc() function with unitless value (100%), percentage unit (%), and absolute units (px).
2. `var(%) + calc()`: This test case uses the var() function with percentage unit (%) and calc() function.
3. `Percentage`: This test case uses only the percentage unit (%) in both calc() and var() functions.
4. `var(px) + calc()`: This test case uses absolute units (px) with calc() function and var() function.

**Options compared**

The benchmark compares the performance of these four test cases to determine which one is the fastest.

**Pros and Cons of different approaches:**

1. **Unitless values**: Using unitless values in calc() can be more efficient than using absolute units, as it allows for easier calculation and conversion between units.
2. **Percentage units**: Using percentage units (e.g., 100%) can simplify calculations and reduce the number of operations required.
3. **Absolute units**: Using absolute units (e.g., 100px) requires more calculations and conversions, which can be slower than using unitless or percentage values.

**Library used**

The benchmark uses JavaScript's built-in `calc()` and `var()` functions, as well as HTML5 DOM APIs for creating elements and setting styles.

**Special JS features/syntax**

None mentioned in the provided JSON data. However, it's worth noting that modern JavaScript engines often use various optimizations, such as:

* **Just-In-Time (JIT) compilation**: JavaScript engines like V8 (used by Chrome/Firefox) can optimize JavaScript code at runtime.
* **Cache optimization**: Some engines may cache frequently accessed values or expressions to improve performance.

**Other alternatives**

If you're interested in exploring alternative benchmarking platforms, consider:

1. **JSPerf**: A popular online platform for creating and running JavaScript benchmarks.
2. **Benchmarker**: A Node.js-based benchmarking library that allows you to create custom benchmarks.
3. **Benchmarking frameworks**: Such as Benchmark.js or Microbenchmark, which provide a more structured approach to writing benchmarks.

These alternatives offer different features and flexibility levels compared to MeasureThat.net, so it's essential to choose the one that best suits your specific needs.

Related benchmarks:

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

Created: one year ago by: Guest

Jump to the latest result

var(unitless) + calc() + %

var(%) + calc()