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

Run details:

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

Browser: Chrome 117

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

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',"transform: 50s; transition: transform 333ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;"); i++; }