Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setProperty
(version: 0)
Comparing performance of:
set-transform vs set-propery
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div> <img class="js-image"/> </div>
Tests:
set-transform
const imageToScale = document.querySelector('.js-image'); imageToScale.style.transform = `scale(${0.5})`;
set-propery
const imageToScale = document.querySelector('.js-image'); imageToScale.style.setProperty('transform', `scale(${0.5})`);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
set-transform
set-propery
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0
Browser/OS:
Firefox 143 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618393" width="100%" height="500px"></iframe>
set-transform
1.8M/s
set-propery
1.7M/s
View exact numbers
Test name
Executions per second
✓
set-transform
1,837,040 Ops/sec
set-propery
1,714,790 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **Benchmark Definition** The benchmark is defined by two main components: 1. **Script Preparation Code**: This code is executed once, before running any test cases. In this case, it's empty, which means no specific setup is required for each test. 2. **Html Preparation Code**: This code is used to create a basic HTML structure with an image element, which will be used as the target for testing. **Test Cases** There are two individual test cases: 1. **set-transform** * The script uses `document.querySelector` to select the `.js-image` element and then sets its `transform` style property using template literals. 2. **set-propery** * Similar to the previous test, but instead of using the `style` object, it uses the `setProperty` method to set the `transform` CSS property. **Library** There is no explicit library mentioned in the benchmark definition or individual test cases. However, some JavaScript features and syntax are used: 1. **Template literals**: Used in both tests to create string interpolation for setting the transform style. 2. **CSS Property Stringification**: The `scale(${0.5})` part uses CSS property stringification to create a valid CSS property value. **Pros and Cons of Different Approaches** * **Using `style` object** (set-transform): + Pros: More straightforward and well-established API, good performance. + Cons: Can be slower due to the overhead of creating a new style object. * **Using `setProperty` method** (set-propery): + Pros: Faster and more lightweight than using the `style` object. + Cons: May not work in older browsers or require additional setup. **Other Considerations** 1. **Browser Support**: The benchmark uses Chrome 117, which may not be compatible with older browsers. If support for multiple browsers is required, additional modifications may be needed. 2. **Performance**: Both tests are designed to measure the performance difference between using `style` and `setProperty`. However, other factors like cache hits or optimization techniques could affect the results. **Alternatives** Other alternatives for testing similar scenarios might include: 1. Using a library like jQuery or Lodash to simplify DOM manipulation. 2. Implementing custom DOM traversal methods instead of relying on `document.querySelector`. 3. Using Web Workers or worker threads to offload computation and measure performance in a more isolated environment. In summary, the benchmark measures the performance difference between using the `style` object and the `setProperty` method for setting CSS properties. While both approaches have their pros and cons, understanding the nuances of each can help developers make informed decisions about their code's performance and compatibility.
Related benchmarks
HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap
replaceWith vs innerHTML
CSS variables VS Set property
styleProperty
Comments
Confirm delete:
Do you really want to delete benchmark?