Benchmark: js css - style.cssText vs style vs setAttribute

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

Tests:

style.cssText
el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
style
el.style.height = '1vh'; el.style.width = '1vw'; el.style.color = 'red'; el.style.border = '1vmin solid red'; el.style.backgroundColor = 'black'; el.style.padding = '0.5vmin';
setAttribute
el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;");

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 20 runs

setAttribute

12.0M/s

style.cssText

710K/s

style

682K/s

Fastest: setAttribute (17.5x faster)

View exact numbers

✓ setAttribute: 11,960,154 ops/sec
• style.cssText: 709,954 ops/sec
• style: 681,531 ops/sec

Firefox 11 runs

setAttribute

3.3M/s

style.cssText

197K/s

style

67K/s

Fastest: setAttribute (49.7x faster)

View exact numbers

✓ setAttribute: 3,328,272 ops/sec
• style.cssText: 196,979 ops/sec
• style: 67,015 ops/sec

Mobile Results:

Safari 5 runs

setAttribute

19.3M/s

style

350K/s

style.cssText

298K/s

Fastest: setAttribute (64.6x faster)

View exact numbers

✓ setAttribute: 19,271,116 ops/sec
• style: 349,531 ops/sec
• style.cssText: 298,093 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.cssText
style
setAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Browser/OS: Chrome 150 on Windows

View result in a separate tab

setAttribute

15.9M/s

style

853K/s

style.cssText

752K/s

View exact numbers

Test name	Executions per second
✓ setAttribute	15,937,571 Ops/sec
style	853,404 Ops/sec
style.cssText	751,821 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark compares three different ways to apply styles to an HTML element:

1. Using `style.cssText`
2. Breaking out individual style properties (e.g., `height`, `width`, `color`, etc.) and setting them separately
3. Using the `setAttribute` method to set a single attribute with multiple values

**Options Compared**

The three options are compared for their performance, which is measured in executions per second.

1. **style.cssText**: This option sets all styles as a single string value.
2. **style**: This option breaks out individual style properties and sets them separately.
3. **setAttribute**: This option uses the `setAttribute` method to set multiple values in a single attribute.

**Pros and Cons of Each Approach**

1. **style.cssText**
	* Pros: Convenient, easy to read, and maintainable code.
	* Cons:
		+ Performance overhead due to string manipulation and parsing.
		+ May lead to issues with style inheritance or override.
2. **style**
	* Pros:
		+ Easier to manage and debug individual styles.
		+ Avoids potential style inheritance issues.
	* Cons:
		+ More verbose code compared to `style.cssText`.
		+ Additional overhead due to multiple attribute accesses.
3. **setAttribute**
	* Pros: Efficient, lightweight, and suitable for dynamic or variable styling.
	* Cons:
		+ Less intuitive and readable code.
		+ May lead to issues with CSS specificity or inheritance.

**Library and Special JS Features**

No libraries are mentioned in the benchmark definition, but it's worth noting that `style.cssText` uses a feature of HTML5 stylesheets. However, most browsers support this feature, so it's not a special case.

**Other Considerations**

* **Browser differences**: The benchmark runs on Firefox 114 and Windows Desktop. Other browsers or platforms might behave differently.
* **Performance variations**: Results may vary depending on the specific hardware, software, or JavaScript engine used.
* **Readability and maintainability**: While performance is crucial, readable and maintainable code should also be a priority.

**Alternatives**

Other approaches to apply styles could include:

1. Using CSS inline styles with `style` attribute (e.g., `<div style="height: 100px; width: 200px;">`)
2. Creating a separate stylesheet or external resource file
3. Using a CSS-in-JS library like styled-components, Emotion, or React Style Sheets

These alternatives might offer better performance, readability, or maintainability in certain scenarios, but their trade-offs should be carefully evaluated depending on the specific use case and requirements.

js css - style.cssText vs style vs setAttribute (version: 0) Benchmark.js

Comparing performance of: `style.cssText vs style vs setAttribute`

Created: 3 years ago by: Guest

Go to the latest result

style.cssText

style

setAttribute

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 20 runs

Firefox 11 runs

Mobile Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

js css - style.cssText vs style vs setAttribute (version: 0) Benchmark.js

Comparing performance of: style.cssText vs style vs setAttribute

Created: 3 years ago by: Guest

Go to the latest result

style.cssText

style

setAttribute

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 20 runs

Firefox 11 runs

Mobile Results:

Safari 5 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.cssText vs style vs setAttribute`