MeasureThat.net

Run results for: 1 css var - style.setProperty vs style.cssText vs style vs Object.assign vs setAttribute

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Chrome 131
Mac OS X 10.15.7
Desktop
5 months ago
Test name Executions per second
style.setProperty 129.8 Ops/sec
style.cssText 170.0 Ops/sec
style 141.2 Ops/sec
Object.assign 417.9 Ops/sec
setAttribute 357.7 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="test"><div style="height: calc(var(--w, 1) * 1px); background-color:red;"></div></div>
Script Preparation code:
 
el = document.getElementById("test");
rn = ()=>Math.floor(10+Math.random(5));
Tests:

  • style.setProperty

    ​x
     
    let i = 0;
    ​
    while (i < 10000) {
      el.style.setProperty("--w", rn);
    ​
      i++;
    }

  • style.cssText

     
    let i = 0;
    ​
    while (i < 10000) {
      el.style.cssText = `--w: ${rn()};`;
      i++;
    }

  • style

     
    let i = 0;
    ​
    while (i < 10000) {
      el.style = `--w: ${rn()};`;
      i++;
    }

  • Object.assign

     
    ​
    let i = 0;
    ​
    while (i < 10000) {
      Object.assign(el.style, {
      ['--w']: rn(),
    ​
    ​
    });
      i++;
    }

  • setAttribute

     
    let i = 0;
    ​
    while (i < 10000) {
      el.setAttribute('style',`--w: ${rn()};`);
      i++;
    }