Benchmark: setAttribute vs style.cssText

HTML Preparation code:

<div id="foo"></div>

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.setAttribute("style", "width: "+i+"px; height: "+i+"px;"); }
style
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.style.cssText = `width: ${i}px; height: ${i}px;`; }

Historical Performance Data aggregated from 39 community runs

Desktop Results:

Chrome 26 runs

style

151/s

setAttribute

125/s

Fastest: style (1.2x faster)

View exact numbers

✓ style: 151 ops/sec
• setAttribute: 125 ops/sec

Firefox 13 runs

style

87/s

setAttribute

59/s

Fastest: style (1.5x faster)

View exact numbers

✓ style: 87 ops/sec
• setAttribute: 59 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
setAttribute
style

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

style

35/s

setAttribute

23/s

View exact numbers

Test name	Executions per second
✓ style	35 Ops/sec
setAttribute	23 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of setting attribute and styling an element using CSS are two common scenarios that can be compared to understand which approach is faster.

**Setting Attribute vs Styling with CSS**

The two approaches being compared in this benchmark are:

1. **setAttribute**: This method involves setting the `style` attribute of the element directly. The syntax is `element.setAttribute('style', 'width: ' + i + 'px; height: ' + i + 'px');`. This approach is more prone to browser quirks and inconsistencies because it relies on the browser's interpretation of the CSS syntax in the `style` attribute.
2. **Styling with CSS**: This method involves setting the `cssText` property of the element using a template literal. The syntax is `element.style.cssText = 'width: ' + i + 'px; height: ' + i + 'px';`. This approach is more consistent and reliable because it follows the standard CSS syntax.

**Pros and Cons**

* **setAttribute**:
	+ Pros: Can be faster in some cases due to the simplicity of the operation.
	+ Cons: More prone to browser quirks, may not work as expected in all browsers, and can lead to inconsistent results.
* **Styling with CSS**:
	+ Pros: More consistent and reliable across different browsers, follows standard CSS syntax.
	+ Cons: May be slower than `setAttribute` due to the overhead of parsing and executing the CSS code.

**Library**

There is no library being used in this benchmark. The JavaScript code is simple and does not involve any external libraries or frameworks.

**Special JS Feature/Syntax**

The test case uses a template literal feature in JavaScript, which allows you to embed expressions inside string literals using the backtick (`) character. This feature was introduced in ECMAScript 2015 (ES6) and has been widely adopted since then.

**Other Alternatives**

If you were to implement this benchmark yourself, you could consider other approaches such as:

* Using a CSS-in-JS library like styled-components or emotion.
* Utilizing a CSS preprocessing tool like PostCSS or Sass.
* Implementing a custom CSS parser and renderer.

However, these alternatives would likely introduce additional complexity and overhead, making them less suitable for a simple benchmarking scenario like this one.

setAttribute vs style.cssText (version: 0)

Comparing performance of: `setAttribute vs style`

Created: 4 years ago by: Guest

Go to the latest result

setAttribute

style

Historical Performance Data aggregated from 39 community runs

Desktop Results:

Chrome 26 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

setAttribute vs style.cssText (version: 0)

Comparing performance of: setAttribute vs style

Created: 4 years ago by: Guest

Go to the latest result

setAttribute

style

Historical Performance Data aggregated from 39 community runs

Desktop Results:

Chrome 26 runs

Firefox 13 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: `setAttribute vs style`