Run results for: set styles comparison

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser: Chrome 110

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
1	119.8 Ops/sec
2	168.1 Ops/sec
3	171.6 Ops/sec
setAttribute	688.6 Ops/sec

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");
props = {
  height: '1vh',
  width: '1vw',
  color: 'red',
  border: '1vmin solid red',
  'background-color': 'black',
  padding: '0.5vmin'
};

Tests:

1
let i = 0; while (i < 10000) { let css = ''; for (const k in props) { css += `${k}:${props[k]};`; } el.setAttribute('style', css); i++; }
2
let i = 0; while (i < 10000) { el.setAttribute('style', Object.entries(props).map(x => x[0] + ':' + x[1] + ';').join('')); i++; }
3
let i = 0; while (i < 10000) { let css = ''; let ents = Object.entries(props); for (let ii = 0; ii < ents.length; ii++) { css += `${ents[ii][0]}:${ents[ii][1]};`; } el.setAttribute('style', css); 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++; }

Run results for: set styles comparison

1

2

3

setAttribute