Run results for: style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser: Chrome 138

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

style.setProperty

1.1M/s

style.cssText

956K/s

style

865K/s

attributeStyleMap.set

350K/s

View exact numbers

Test name	Executions per second
✓ style.setProperty	1,075,446 Ops/sec
style.cssText	955,846 Ops/sec
style	865,053 Ops/sec
attributeStyleMap.set	349,724 Ops/sec

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");
style = el.style
attributeStyleMap = el.attributeStyleMap

color = 'red'
border = '1vmin solid red'
padding = '.5vmin'
backgroundColor = 'black'
height = '1vh'
width = '1vw'

Tests:

style.setProperty
style.setProperty("color", color); style.setProperty("border", border); style.setProperty("padding", padding); style.setProperty("background-color", backgroundColor); style.setProperty("height", height); style.setProperty("width", width);
style.cssText
style.cssText = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
style
el.style = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
attributeStyleMap.set
attributeStyleMap.set("color",color); attributeStyleMap.set("border",border); attributeStyleMap.set("padding",padding); attributeStyleMap.set("background-color",backgroundColor); attributeStyleMap.set("height",height); attributeStyleMap.set("width",width);