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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years 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>

Fastest: N/A

Slowest: N/A

No previous run results

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