Run results for: CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append

Run details:

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

Browser: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
setProperty	158.0 Ops/sec
Object.assign	248.5 Ops/sec
.style	240.3 Ops/sec
.cssText	22.4 Ops/sec

HTML Preparation code:

<div id="benchmark"></div>

Script Preparation code:

const numTests = 10000;
const el = document.getElementById("benchmark");
const css = (new Array(numTests)).fill(0).map(() => ({
   "opacity": `${Math.random()}`,
   "zIndex": `${Math.floor(Math.random() * 1000)}`
}));

Tests:

setProperty
let i = 0; while (i < numTests) { for (const s in css[i]) { el.style.setProperty(s.replace(/([a-z][A-Z])/g, (m) => m[0] + "-" + m[1].toLowerCase()), css[i][s]); } i++; }
Object.assign
let i = 0; while (i < numTests) { Object.assign(el.style, css[i]); i++; }
.style
let i = 0; while (i < numTests) { for (const s in css[i]) { el.style[s] = css[i][s]; } i++; }
.cssText
let i = 0; while (i < numTests) { console.log(i, css[i]); const s = Object.entries(css[i]).map(([key, value]) => `${key}:${value}`).join(";"); el.style.cssText += s; i++; }

Run results for: CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append

Tests whether manipulating an HTML element's inline styles is fastest via .setProperty(), Object.assign, .style or by appending to the cssText.

setProperty

Object.assign

.style

.cssText