Benchmark: CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setProperty
Object.assign
.style
.cssText

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
setProperty	32.5 Ops/sec
Object.assign	35.3 Ops/sec
.style	35.9 Ops/sec
.cssText	31.9 Ops/sec

Related benchmarks:

CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append (version: 1)

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

Comparing performance of: setProperty vs Object.assign vs .style vs .cssText

Created: one year ago by: Registered User

Jump to the latest result

setProperty

Object.assign

.style

.cssText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A