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

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

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)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
var(unitless) + calc() + %	1111.7 Ops/sec
var(%)	1238.4 Ops/sec
Percentage	1385.0 Ops/sec
var(unitless) + calc() + px	1136.1 Ops/sec
px	1328.1 Ops/sec
var(px)	1182.8 Ops/sec

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

Overview of the Benchmark

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net, which compares the performance of different approaches for calculating translations using CSS calc() and var() functions.

Benchmark Definitions

There are six individual test cases:

var(unitless) + calc() + px: This test uses the calc() function with a unitless value and multiplies it by 1px.
var(px) + calc() + %: This test uses the calc() function with a px value multiplied by 1%.
var(%) + calc() + px: This test uses the calc() function with a percentage value multiplied by 1px.
var(unitless) + calc() + %: This test uses the calc() function with a unitless value multiplied by 1%.
var(%) + calc() + %: This test uses the calc() function with two percentage values.
var(unitless) + calc() + px: This test uses the calc() function with a unitless value and multiplies it by 1px.

Comparison of Approaches

The main difference between these approaches is how they calculate the translation values:

calc() functions allow you to perform complex arithmetic calculations, including multiplication and division. They also provide more precise control over the calculation process.
var() functions, on the other hand, are used for storing and retrieving values that can be accessed throughout a JavaScript program using the var keyword.

Pros and Cons of Different Approaches

Here's a brief summary of the pros and cons of each approach:

Calc(): Pros - More precise control over calculations. Cons - May be slower due to the additional arithmetic operations involved.
Var(): Pros - Faster execution, as it only involves simple value lookup. Cons - Less precise control over calculations.

Library Usage

In this benchmark, the var() function is used in all test cases except for one that uses the calc() function. The var() function is likely being used here to provide a faster and more efficient way of calculating translation values without sacrificing too much precision.

Special JS Features or Syntax

The use of the calc() function and the var() function indicates that the test case is taking advantage of JavaScript's advanced calculation capabilities, specifically designed for handling complex arithmetic operations. The calc() function allows you to express calculations using a simple syntax (value1 operator value2), making it easier to write code that performs precise calculations.

Alternatives

Other alternatives could be considered in terms of optimizing the benchmark or exploring different approaches:

Using a dedicated CSS library: Some libraries, like jQuery or React, have optimized versions of the calc() function for better performance.
Implementing custom arithmetic functions: You can create your own custom arithmetic functions that provide more control over calculations and potentially faster execution times.
Exploring different calculation methods: There are other calculation methods available in CSS, such as using percentages or ems. You could investigate whether these alternatives offer better performance for certain use cases.

Conclusion

The test case highlights the trade-offs between precision and speed when it comes to calculating translation values using calc() and var() functions. By choosing the right approach based on your specific requirements, you can optimize performance while maintaining acceptable levels of accuracy.

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

**Benchmark Definitions**

There are six individual test cases:

1. **var(unitless) + calc() + px**: This test uses the calc() function with a unitless value and multiplies it by 1px.
2. **var(px) + calc() + %**: This test uses the calc() function with a px value multiplied by 1%.
3. **var(%) + calc() + px**: This test uses the calc() function with a percentage value multiplied by 1px.
4. **var(unitless) + calc() + %**: This test uses the calc() function with a unitless value multiplied by 1%.
5. **var(%) + calc() + %**: This test uses the calc() function with two percentage values.
6. **var(unitless) + calc() + px**: This test uses the calc() function with a unitless value and multiplies it by 1px.

**Comparison of Approaches**

The main difference between these approaches is how they calculate the translation values:

*   `calc()` functions allow you to perform complex arithmetic calculations, including multiplication and division. They also provide more precise control over the calculation process.
*   `var()` functions, on the other hand, are used for storing and retrieving values that can be accessed throughout a JavaScript program using the `var` keyword.

**Pros and Cons of Different Approaches**

Here's a brief summary of the pros and cons of each approach:

*   **Calc()**: Pros - More precise control over calculations. Cons - May be slower due to the additional arithmetic operations involved.
*   **Var()**: Pros - Faster execution, as it only involves simple value lookup. Cons - Less precise control over calculations.

**Library Usage**

In this benchmark, the `var()` function is used in all test cases except for one that uses the `calc()` function. The `var()` function is likely being used here to provide a faster and more efficient way of calculating translation values without sacrificing too much precision.

**Special JS Features or Syntax**

The use of the `calc()` function and the `var()` function indicates that the test case is taking advantage of JavaScript's advanced calculation capabilities, specifically designed for handling complex arithmetic operations. The `calc()` function allows you to express calculations using a simple syntax (`value1 operator value2`), making it easier to write code that performs precise calculations.

**Alternatives**

Other alternatives could be considered in terms of optimizing the benchmark or exploring different approaches:

*   **Using a dedicated CSS library**: Some libraries, like jQuery or React, have optimized versions of the `calc()` function for better performance.
*   **Implementing custom arithmetic functions**: You can create your own custom arithmetic functions that provide more control over calculations and potentially faster execution times.
*   **Exploring different calculation methods**: There are other calculation methods available in CSS, such as using percentages or ems. You could investigate whether these alternatives offer better performance for certain use cases.

**Conclusion**

The test case highlights the trade-offs between precision and speed when it comes to calculating translation values using `calc()` and `var()` functions. By choosing the right approach based on your specific requirements, you can optimize performance while maintaining acceptable levels of accuracy.

Related benchmarks:

Test: CSS calc() with var() - 01 (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)

Created: one year ago by: Registered User

Jump to the latest result

var(unitless) + calc() + %