Benchmark: 7 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

HTML Preparation code:

<div id="test"></div>

AخA
 
<div id="test"></div>

Script Preparation code:

el = document.getElementById("test");

 
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++; }
x

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++; }
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 replace
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++; }
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++;
}

 
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++; }
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++;
}

style update

let i = 0;

while (i < 10000) {
  el.style.color = "red";
  el.style.border = "1vmin solid red";
  el.style.padding = "0.5vmin";
  el.style.backgroundColor = "black";
  el.style.height = "1vh";
  el.style.width = "1vw";
  i++;
}

 
let i = 0;​while (i < 10000) {  el.style.color = "red";  el.style.border = "1vmin solid red";  el.style.padding = "0.5vmin";  el.style.backgroundColor = "black";  el.style.height = "1vh";  el.style.width = "1vw";  i++;}

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
style.setProperty
style.cssText
style replace
Object.assign
setAttribute
style update

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
style.setProperty	7.9 Ops/sec
style.cssText	16.9 Ops/sec
style replace	15.5 Ops/sec
Object.assign	9.9 Ops/sec
setAttribute	330.4 Ops/sec
style update	8.7 Ops/sec

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

Let's break down the benchmark and its test cases.

Benchmark Overview

The benchmark, named "7 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute," compares the performance of different methods for setting CSS styles on an HTML element. The goal is to identify which method is the fastest and most efficient.

Test Cases

There are five test cases:

style.setProperty: This method sets a single property value using the setProperty function, followed by a loop that applies multiple properties with varying units (e.g., %, em, etc.) to the element.
style.cssText: This method sets all CSS styles as a single string in the cssText property of the element's style attribute. The test case is similar to the first one, but uses this approach instead.
style replace: This method is not clearly explained in the benchmark definition, so I'll assume it means setting multiple properties on the element using the dot notation (e.g., el.style.color).
Object.assign: This method sets all CSS styles by passing an object with property-value pairs to the assign function and applying it to the element's style attribute.
setAttribute: This method sets a single property value in the style attribute of the element, followed by a loop that applies multiple properties to the element.

Libraries and Special Features

None of the test cases use any external libraries or special features like ES modules, async/await, or Web Workers.

Performance Comparison

The benchmark results show that:

setAttribute is the fastest method for setting individual property values.
style.setProperty is faster than style.cssText, likely due to its ability to set multiple properties in a single call with varying units.
Object.assign and style replace are slower, possibly because they require creating an object or modifying the element's style attribute, which can be more expensive operations.

Alternatives

If you want to explore other approaches for setting CSS styles on an HTML element, consider these alternatives:

Using CSS classes with JavaScript: Instead of setting individual properties, use CSS classes and apply them dynamically using JavaScript. This approach can be faster than setting each property individually.
Utilizing the css API: The Web APIs provide a css interface for styling elements. You can use this API to update styles efficiently.

Keep in mind that these alternatives may have different performance characteristics or require additional setup and syntax changes.

In summary, the benchmark results suggest that setAttribute is a good choice when you need to set individual property values quickly, while style.setProperty and style.cssText might be better suited for situations where multiple properties need to be applied with varying units.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

**Test Cases**

There are five test cases:

1. **style.setProperty**: This method sets a single property value using the `setProperty` function, followed by a loop that applies multiple properties with varying units (e.g., `%`, `em`, etc.) to the element.
2. **style.cssText**: This method sets all CSS styles as a single string in the `cssText` property of the element's style attribute. The test case is similar to the first one, but uses this approach instead.
3. **style replace**: This method is not clearly explained in the benchmark definition, so I'll assume it means setting multiple properties on the element using the dot notation (e.g., `el.style.color`).
4. **Object.assign**: This method sets all CSS styles by passing an object with property-value pairs to the `assign` function and applying it to the element's style attribute.
5. **setAttribute**: This method sets a single property value in the `style` attribute of the element, followed by a loop that applies multiple properties to the element.

**Libraries and Special Features**

None of the test cases use any external libraries or special features like ES modules, async/await, or Web Workers.

**Performance Comparison**

The benchmark results show that:

* **setAttribute** is the fastest method for setting individual property values.
* **style.setProperty** is faster than **style.cssText**, likely due to its ability to set multiple properties in a single call with varying units.
* **Object.assign** and **style replace** are slower, possibly because they require creating an object or modifying the element's style attribute, which can be more expensive operations.

**Alternatives**

If you want to explore other approaches for setting CSS styles on an HTML element, consider these alternatives:

* Using CSS classes with JavaScript: Instead of setting individual properties, use CSS classes and apply them dynamically using JavaScript. This approach can be faster than setting each property individually.
* Utilizing the `css` API: The Web APIs provide a `css` interface for styling elements. You can use this API to update styles efficiently.

Keep in mind that these alternatives may have different performance characteristics or require additional setup and syntax changes.

In summary, the benchmark results suggest that **setAttribute** is a good choice when you need to set individual property values quickly, while **style.setProperty** and **style.cssText** might be better suited for situations where multiple properties need to be applied with varying units.

Related benchmarks:

7 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 replace vs Object.assign vs setAttribute vs style update

Created: 3 years ago by: Guest

Jump to the latest result

style.setProperty

style.cssText

style replace