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
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
Test name
Executions per second
setProperty
150.5 Ops/sec
Object.assign
180.9 Ops/sec
.style
220.8 Ops/sec
.cssText
18.6 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++; }