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

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

Historical Performance Data aggregated from 207 community runs

Desktop Results:

Chrome 142 runs

setAttribute

626/s

style.cssText

45/s

style

40/s

Object.assign

40/s

style.setProperty

37/s

Fastest: setAttribute (16.7x faster)

View exact numbers

✓ setAttribute: 626 ops/sec
• style.cssText: 45 ops/sec
• style: 40 ops/sec
• Object.assign: 40 ops/sec
• style.setProperty: 37 ops/sec

Firefox 31 runs

setAttribute

454/s

style.cssText

30/s

style

27/s

style.setProperty

9/s

Object.assign

8/s

Fastest: setAttribute (53.4x faster)

View exact numbers

✓ setAttribute: 454 ops/sec
• style.cssText: 30 ops/sec
• style: 27 ops/sec
• style.setProperty: 9 ops/sec
• Object.assign: 8 ops/sec

Safari 15 runs

setAttribute

512/s

style.cssText

31/s

style

30/s

Object.assign

21/s

style.setProperty

17/s

Fastest: setAttribute (29.7x faster)

View exact numbers

✓ setAttribute: 512 ops/sec
• style.cssText: 31 ops/sec
• style: 30 ops/sec
• Object.assign: 21 ops/sec
• style.setProperty: 17 ops/sec

Mobile Results:

Chrome 12 runs

setAttribute

185/s

style.cssText

18/s

style

15/s

Object.assign

13/s

style.setProperty

12/s

Fastest: setAttribute (15.7x faster)

View exact numbers

✓ setAttribute: 185 ops/sec
• style.cssText: 18 ops/sec
• style: 15 ops/sec
• Object.assign: 13 ops/sec
• style.setProperty: 12 ops/sec

Safari 7 runs

setAttribute

2K/s

style.cssText

63/s

style

61/s

Object.assign

42/s

style.setProperty

40/s

Fastest: setAttribute (56.3x faster)

View exact numbers

✓ setAttribute: 2,240 ops/sec
• style.cssText: 63 ops/sec
• style: 61 ops/sec
• Object.assign: 42 ops/sec
• style.setProperty: 40 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style
Object.assign
setAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

setAttribute

2K/s

style.setProperty

82/s

style.cssText

81/s

Object.assign

77/s

style

74/s

View exact numbers

Test name	Executions per second
✓ setAttribute	1,551 Ops/sec
style.setProperty	82 Ops/sec
style.cssText	81 Ops/sec
Object.assign	77 Ops/sec
style	74 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 benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of six different ways to set CSS styles on an HTML element:

1. `style.setProperty`
2. `style.cssText`
3. `style`
4. `Object.assign` with a style object
5. `setAttribute` with a style string

Each test case uses a similar setup: a container element (`el`) is created, and then a loop of 10,000 iterations sets the styles using one of the six methods.

**Options Compared**

Here's a brief overview of each option:

1. **style.setProperty**: This method sets individual CSS properties (e.g., `color`, `border`, etc.) separately. It's considered more efficient because it only updates the specific property being changed, whereas other methods update all styles at once.
2. **style.cssText**: This method sets a single string that contains all the styles for an element. This approach is less efficient than others because it requires parsing and applying the entire style string in one step.
3. **style**: Similar to `style.cssText`, but without the string syntax. It still updates all styles at once, making it less efficient.
4. **Object.assign** with a style object: This method uses JavaScript's built-in `Object.assign` function to update an element's style object. While this approach is more efficient than updating individual properties, it requires creating and manipulating objects, which can be slower than direct property updates.
5. **setAttribute** with a style string: This method sets the `style` attribute of an element using a string that contains all the styles. Similar to `style.cssText`, but without the need for parsing; however, this approach is less efficient because it requires updating the entire style string.

**Pros and Cons**

Here's a brief summary of each option:

* **style.setProperty**: Pros: efficient for individual property updates; Cons: may incur overhead due to separate property updates.
* **style.cssText**: Pros: simple, easy to use; Cons: less efficient due to parsing and applying the entire style string.
* **style**: Similar pros and cons as `style.cssText`.
* **Object.assign** with a style object: Pros: efficient for updating an element's style object; Cons: requires creating and manipulating objects.
* **setAttribute** with a style string: Pros: simple, easy to use; Cons: less efficient due to parsing the entire style string.

**Other Considerations**

When comparing these options, it's essential to consider factors like:

* Browser support: Each option may have different levels of support across browsers.
* Performance overhead: Some methods may incur additional overhead due to parsing, string manipulation, or object creation.
* Code readability and maintainability: Simple and straightforward methods like `style.setProperty` are often preferred for their ease of use.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

* Using CSS-in-JS solutions like styled-components or emotion, which provide a more declarative way to manage styles.
* Leveraging modern browser features like the `CSSStyleDeclaration` API or the `style.set()` method, which offer improved performance and flexibility.

Keep in mind that the results of this benchmark might not be representative for all use cases. The choice of method ultimately depends on your specific requirements, performance constraints, and coding style preferences.

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 2)

Comparing performance of: `style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute`

Created: 5 years ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Historical Performance Data aggregated from 207 community runs

Desktop Results:

Chrome 142 runs

Firefox 31 runs

Safari 15 runs

Mobile Results:

Chrome 12 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 2)

Comparing performance of: style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

Created: 5 years ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

Object.assign

setAttribute

Historical Performance Data aggregated from 207 community runs

Desktop Results:

Chrome 142 runs

Firefox 31 runs

Safari 15 runs

Mobile Results:

Chrome 12 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute`