Benchmark: style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

Tests:

style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("color","red"); el.style.setProperty("border","1px solid red"); el.style.setProperty("padding","16px"); el.style.setProperty("height","12px"); el.style.setProperty("width","12px"); el.style.setProperty("color","blue"); el.style.setProperty("border","2px dashed black"); el.style.setProperty("padding","8px"); el.style.setProperty("height","20px"); el.style.setProperty("width","20px"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = "color:red;border:1px solid red;padding:16px;height:12px;width:12px;"; el.style.cssText = "color:blue;border:2px dashed black;padding:8px;height:20px;width:20px;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "color:red;border:1px solid red;padding:16px;height:12px;width:12px;"; el.style = "color:blue;border:2px dashed black;padding:8px;height:20px;width:20px;"; i++; }
Object.assign
let i = 0; while (i < 10000) { Object.assign(el.style, { color: 'red', border: '1px solid red', padding: '16px', height: '12px', width: '12px' }); Object.assign(el.style, { color: 'blue', border: '2px dashed black', padding: '8px', height: '20px', width: '20px' }); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"color:red;border:1px solid red;padding:16px;height:12px;width:12px;"); el.setAttribute('style',"color:blue;border:2px dashed black;padding:8px;height:20px;width:20px;"); i++; }

Rendered benchmark preparation results:

Previous results

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

Latest run results:

This benchmark does not have any results yet. Be the first one to run it!

style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute (version: 0)