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
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0
Browser:
Firefox 120
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
setAttribute
275/s
style.setProperty
47/s
style.cssText
27/s
Object.assign
27/s
style
25/s
View exact numbers
Test name
Executions per second
✓
setAttribute
275 Ops/sec
style.setProperty
47 Ops/sec
style.cssText
27 Ops/sec
Object.assign
27 Ops/sec
style
25 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++; }