Run results for: 6 properties - style.setProperty vs attributeStyleMap.set vs attributeStyleMap.set with parsed values

Run details:

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

Browser: Chrome 124

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

style.setProperty

15/s

attributeStyleMap.set with parsed values

7/s

attributeStyleMap.set

4/s

View exact numbers

Test name	Executions per second
✓ style.setProperty	15 Ops/sec
attributeStyleMap.set with parsed values	7 Ops/sec
attributeStyleMap.set	4 Ops/sec

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");
color = CSSStyleValue.parse("color","red");
border = CSSStyleValue.parse("border","1vmin solid red");
padding = CSSStyleValue.parse("padding","0.5vmin");
backgroundColor = CSSStyleValue.parse("background-color","black");
height = CSSStyleValue.parse("height","1vh");
width = CSSStyleValue.parse("width","1vw");

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("color","red"); el.style.setProperty("border","1vmin solid red"); el.style.setProperty("padding","0.5vmin"); el.style.setProperty("background-color","black"); el.style.setProperty("height","1vh"); el.style.setProperty("width","1vw"); i++; }
attributeStyleMap.set
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color","red"); el.attributeStyleMap.set("border","1vmin solid red"); el.attributeStyleMap.set("padding","0.5vmin"); el.attributeStyleMap.set("background-color","black"); el.attributeStyleMap.set("height","1vh"); el.attributeStyleMap.set("width","1vw"); i++; }
attributeStyleMap.set with parsed values
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color", color); el.attributeStyleMap.set("border", border); el.attributeStyleMap.set("padding", padding); el.attributeStyleMap.set("background-color", backgroundColor); el.attributeStyleMap.set("height", height); el.attributeStyleMap.set("width", width); i++; }