Run results for: 【JiangNanGame】6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

Run details:

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: Chrome 115

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
style.setProperty	2.0 Ops/sec
style.cssText+=	0.7 Ops/sec
style.xxx	1.9 Ops/sec
Object.assign	1.8 Ops/sec
setAttribute	23.1 Ops/sec
style.cssText=	2.2 Ops/sec

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

Run results for: 【JiangNanGame】6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

style.setProperty

style.cssText+=

style.xxx

Object.assign

setAttribute

style.cssText=