Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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.
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=591972" width="100%" height="500px"></iframe>
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
Object.assign
248/s
.style
240/s
setProperty
158/s
.cssText
22/s
View exact numbers
Test name
Executions per second
✓
Object.assign
248 Ops/sec
.style
240 Ops/sec
setProperty
158 Ops/sec
.cssText
22 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++; }