MeasureThat.net

Run results for: Comparison of setting style via different methods

Go to the benchmark
Run details:
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
Safari 16
Mac OS X 10.15.7
Desktop
2 years ago
Test name Executions per second
setProperty 2879.5 Ops/sec
cssText 1833.6 Ops/sec
setAttribute 4333.3 Ops/sec
style property 3247.6 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="test"></div>
Script Preparation code:
 
globalThis.test = document.getElementById('test');
Tests:

  • setProperty

    ​x
     
    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';
    }