Benchmark: CSS variables VS Set property

HTML Preparation code:

<div>
 <img class="js-image"/>
</div>

Tests:

Transform
const imageToScale = document.querySelector('.js-image'); imageToScale.style.transform = `scale(${0.5})`;
CSS property
const imageToScale = document.querySelector('.js-image'); imageToScale.style.setProperty('--motion-scale', 0.5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Transform
CSS property

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Linux

View result in a separate tab

Test name	Executions per second
Transform	504783.2 Ops/sec
CSS property	436908.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition and Preparation**

The provided benchmark definition is a JSON object that contains information about the benchmark, including its name, description, script preparation code, and HTML preparation code. In this case, there is no script preparation code or detailed description, but we can infer what's being tested from the individual test cases.

The HTML preparation code includes a simple `<div>` with an image element (`<img class="js-image" />`) that will be used as the subject of the benchmark.

**Test Cases**

There are two test cases:

1. **Transform**: This test case uses JavaScript to set the `transform` property directly on the `imageToScale` object.
2. **CSS property**: This test case uses CSS variables (also known as custom properties) to set a value called `--motion-scale`, and then applies that value using the `setProperty` method.

**Comparison of Approaches**

Both approaches aim to scale an image by 50% using JavaScript. However, there are some differences in their implementation:

* **Transform**: This approach uses the `transform` property directly on the element's style object. It's a more straightforward and direct way to apply styles, but it might not be as efficient or flexible.
* **CSS Property**: This approach uses CSS variables (e.g., `--motion-scale`) to define the value, and then applies that value using the `setProperty` method. This approach is more declarative and separates the style definition from the JavaScript execution.

**Pros and Cons of Each Approach**

* **Transform**:
	+ Pros: Simple, direct, and easy to understand.
	+ Cons: Might not be as efficient or flexible due to the need to directly manipulate the element's style object.
* **CSS Property**:
	+ Pros: Declarative, separates style definition from JavaScript execution, more flexible.
	+ Cons: Requires setting up CSS variables beforehand, might have additional complexity for users who are not familiar with them.

**Libraries and Special Features**

In this benchmark, there is no explicit mention of any libraries or special features beyond the standard JavaScript capabilities. However, it's worth noting that the use of CSS variables (custom properties) requires support from the browser, which is explicitly mentioned in the `Browser` field of the latest benchmark result.

**Other Alternatives**

If you want to explore other alternatives for scaling an image using JavaScript, here are a few options:

* Using a library like jQuery or a similar library that provides utility functions for DOM manipulation and styling.
* Utilizing canvas or SVG elements to perform scaling and transformations on images.
* Leveraging CSS gradients or animations to achieve the desired effect.

Keep in mind that each approach has its trade-offs, and the choice ultimately depends on your specific use case and requirements.

Related benchmarks:

CSS variables VS Set property (version: 0)

Comparing performance of: Transform vs CSS property

Created: 2 years ago by: Guest

Jump to the latest result

Transform

CSS property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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