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=591974" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/110.0 pagestrip-debug
Browser:
Firefox 110
Operating system:
Mac OS X 10.15
Device Platform:
Desktop
Date tested:
one year ago
.style
221/s
Object.assign
181/s
setProperty
151/s
.cssText
19/s
View exact numbers
Test name
Executions per second
✓
.style
221 Ops/sec
Object.assign
181 Ops/sec
setProperty
151 Ops/sec
.cssText
19 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++; }