Benchmark: set styles comparison

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++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3
setAttribute

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 110 on Linux

View result in a separate tab

Test name	Executions per second
1	117.7 Ops/sec
2	164.5 Ops/sec
3	176.5 Ops/sec
setAttribute	696.3 Ops/sec

set styles comparison (version: 0)

Comparing performance of: 1 vs 2 vs 3 vs setAttribute

Created: one year ago by: Registered User

Jump to the latest result

1

2

3

setAttribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A