Run results for: 6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute yeeeeee

Run details:

User agent: Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-G981N) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.2 Chrome/92.0.4515.166 Mobile Safari/537.36

Browser: Chrome Mobile 92

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
style.setProperty	9.4 Ops/sec
style.cssText	10.0 Ops/sec
style	7.4 Ops/sec
Object.assign	7.6 Ops/sec
setAttribute	5.8 Ops/sec

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("transition", "transform 0s;") el.style.setProperty("transform","translate3d(0,' + 35 +'px,0);"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
style
let i = 0; while (i < 10000) { el.style = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
Object.assign
let style = { transition: "transform 0s;", transform: "translate3d(0,' + 35 +'px,0);" }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"); i++; }