Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
6 properties - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute yeeeeee pt 2
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505449" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser:
Chrome 121
Operating system:
Linux
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
style.setProperty
44.6 Ops/sec
style.cssText
39.5 Ops/sec
style
33.2 Ops/sec
Object.assign
41.3 Ops/sec
setAttribute
132.7 Ops/sec
HTML Preparation code:
<div id="test"></div>
Script Preparation code:
el = document.getElementById("test");
Tests:
style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("transition", "transform 0s;") el.style.setProperty("transform","translate3d(0,' + 35 +'px,0);"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
style
let i = 0; while (i < 10000) { el.style = 'transform: translate3d(0,' + 35 + 'px,0); transition: transform 0s;'; i++; }
Object.assign
let style = { transition: "transform 0s;", transform: "translate3d(0,' + 35 +'px,0);" }; let i = 0; while (i < 10000) { Object.assign(el.style, style); i++; }
setAttribute
let i = 0; while (i < 10000) { el.setAttribute('style',"transform: 50s; transition: transform 333ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;"); i++; }