Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Fork - 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute
(version: 0)
Comparing performance of:
style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="test"></div>
Script Preparation code:
el = document.getElementById("test");
Tests:
style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("color","red"); // el.style.setProperty("border","1vmin solid red"); // el.style.setProperty("padding","0.5vmin"); // el.style.setProperty("background-color","black"); // el.style.setProperty("height","1vh"); // el.style.setProperty("width","1vw"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"; i++; }
Object.assign
let style = { height: '1vh', width: '1vw', color: 'red', border: '1vmin solid red', backgroundColor: 'black', padding: '0.5vmin' }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"); i++; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
style.setProperty
style.cssText
style
Object.assign
setAttribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The provided benchmark tests the performance of different ways to set CSS styles on an HTML element in JavaScript. Here's a breakdown of each test case: 1. `style.setProperty`: * Sets a single CSS property (`color`) with a specific value using the `setProperty` method. * This is done 10,000 times in a loop. * The purpose of this test is to see how well Chrome 96 can handle setting individual properties using the `setProperty` method. 2. `style.cssText`: * Sets multiple CSS properties (color, border, padding, background-color, height, and width) with specific values as a single string in the `cssText` property. * This is done 10,000 times in a loop. * The purpose of this test is to see how well Chrome 96 can handle setting multiple properties using the `cssText` property. 3. `style`: * Sets multiple CSS properties (color, border, padding, background-color, height, and width) with specific values as a string directly on the `style` object. * This is done 10,000 times in a loop. * The purpose of this test is to see how well Chrome 96 can handle setting individual properties on the `style` object. 4. `Object.assign`: * Uses the `Object.assign` method to copy an object (containing CSS properties) and assigns it to the `style` property of an element. * This is done 10,000 times in a loop. * The purpose of this test is to see how well Chrome 96 can handle setting multiple properties using the `Object.assign` method. 5. `setAttribute`: * Sets multiple CSS properties (color, border, padding, background-color, height, and width) with specific values as individual attributes on the element's `style` attribute. * This is done 10,000 times in a loop. * The purpose of this test is to see how well Chrome 96 can handle setting individual properties using the `setAttribute` method. Now, let's discuss the pros and cons of each approach: 1. `style.setProperty`: + Pros: More modern and efficient way of setting CSS properties, especially when dealing with vendor prefixes. + Cons: Can be slower than other methods for large numbers of properties or complex values. 2. `style.cssText`: + Pros: Easy to set multiple properties in a single string, can be faster than individual method calls. + Cons: May not be as efficient as other methods when dealing with vendor prefixes or large numbers of properties. 3. `style`: + Pros: Can be more convenient for setting simple values, but may lead to slower performance due to object property lookups. + Cons: Not ideal for setting multiple properties at once. 4. `Object.assign`: + Pros: Fast and efficient way to set multiple properties from an object. + Cons: May not be compatible with older browsers or versions of Chrome. 5. `setAttribute`: + Pros: Can be faster than other methods when dealing with large numbers of properties. + Cons: Less modern and less readable, may lead to slower performance due to attribute lookups. Other considerations: * For setting individual properties using the `setProperty` method, it's generally recommended to use vendor prefixes (e.g., `-webkit-`, `-moz-`, etc.) to ensure compatibility across browsers. However, this is not shown in the provided benchmark. * When dealing with large numbers of properties or complex values, it's often better to use a single method call or object assignment rather than individual property assignments. Keep in mind that these are general guidelines and may vary depending on specific use cases and browser versions.
Related benchmarks:
setProperty vs style vs cssText
6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute vs assign property
Setting CSS: Direct CSS property vs setAttribute("style",...)
Set Prop Varaible vs setAttribute
Comments
Confirm delete:
Do you really want to delete benchmark?