Benchmark: Comparison of setting style via different methods

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

globalThis.test = document.getElementById('test');

Tests:

setProperty
let i = 1000; while (i -= 1) { test.style.setProperty('color', 'red'); }
cssText
let i = 1000; while (i -= 1) { test.style.cssText = 'color: red'; }
setAttribute
let i = 1000; while (i -= 1) { test.setAttribute('style', 'color: red'); }
style property
let i = 1000; while (i -= 1) { test.style.color = 'red'; }

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

Comparison of setting style via different methods (version: 0)