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

HTML Preparation code:

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

Script Preparation code:

window.el = document.getElementById("test");

Tests:

style.setProperty
let i = 0; const styleObject = el.style; while (i < 100000) { styleObject.setProperty("color","red"); styleObject.setProperty("border","1vmin solid red"); styleObject.setProperty("padding","0.5vmin"); styleObject.setProperty("background-color","black"); styleObject.setProperty("height","1vh"); styleObject.setProperty("width","1vw"); styleObject.setProperty("left","100px"); i++; }
style.cssText+=
let i = 0; const styleObject = el.style; while (i < 100000) { styleObject.cssText += "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;left:100px;"; i++; }
style.xxx
let i = 0; const styleObject = el.style; while (i < 100000) { styleObject.color = "red"; styleObject.border = "1vmin solid red"; styleObject.padding = "0.5vmin"; styleObject['background-color'] = "black"; styleObject.height = "1vh"; styleObject.width = "1vw"; styleObject.left = "100px"; i++; }
Object.assign
let style = { color: "red", border: "1vmin solid red", padding: "0.5vmin", backgroundColor: "black", height: "1vh", width: "1vw", left: "100px", }; let i = 0; const styleObject = el.style; while (i < 100000) { Object.assign(styleObject, style); i++; }
setAttribute
let i = 0; while (i < 100000) { el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;left:100px;"); i++; }
style.cssText=
let i = 0; const styleObject = el.style; while (i < 100000) { styleObject.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;left:100px;"; i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText+=
style.xxx
Object.assign
setAttribute
style.cssText=

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The benchmark compares four different ways to set CSS styles on an HTML element:

1. `style.setProperty`
2. `style.cssText +=`
3. Using dot notation (`style.xxx`)
4. `Object.assign` with a style object
5. `setAttribute` (not part of the official CSS specification, but often used in practice)

**Options being compared**

The benchmark is testing the performance of each option across different browsers and devices.

**Pros and Cons of each approach:**

1. **style.setProperty**
	* Pros:
		+ Fast and efficient
		+ Can set multiple properties in a single call
	* Cons:
		+ Not supported by older browsers (e.g., Internet Explorer)
2. `style.cssText +=`
	* Pros:
		+ Works across all browsers
	* Cons:
		+ Inefficient, as it requires concatenating strings and parsing CSS syntax
3. Using dot notation (`style.xxx`)
	* Pros:
		+ Fast and efficient (similar to `style.setProperty`)
	* Cons:
		+ Limited to numeric property names only (e.g., no colors or fonts)
4. `Object.assign` with a style object
	* Pros:
		+ Works across all browsers
	* Cons:
		+ Inefficient, as it requires creating a new object and assigning properties
5. `setAttribute`
	* Pros:
		+ Works across all browsers (including older ones)
	* Cons:
		+ Not part of the official CSS specification, which can lead to inconsistent behavior

**Other considerations:**

* The benchmark uses a while loop to execute each test case 100,000 times, which is a common approach for measuring performance.
* The test cases use a mix of simple and complex styles (e.g., colors, fonts, borders) to simulate real-world usage scenarios.

**Library used:**

None mentioned in the provided code. However, it's likely that the benchmark uses a JavaScript framework or library (e.g., Chrome DevTools) to execute the tests and measure performance.

Overall, this benchmark provides valuable insights into the performance characteristics of different CSS styling approaches across various browsers and devices.

Latest run results:

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

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	2.3 Ops/sec
style.cssText+=	0.7 Ops/sec
style.xxx	2.1 Ops/sec
Object.assign	1.8 Ops/sec
setAttribute	24.3 Ops/sec
style.cssText=	2.3 Ops/sec

Related benchmarks:

【JiangNanGame】6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 5)

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

Created: one year ago by: Registered User

Jump to the latest result

style.setProperty

style.cssText+=

style.xxx

Object.assign

setAttribute

style.cssText=

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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