MeasureThat.net

Run results for: CSS: .setProperty vs. Object.assign vs. .style vs. cssText-append

Tests whether manipulating an HTML element's inline styles is fastest via .setProperty(), Object.assign, .style or by appending to the cssText.

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/18.3 Safari/605.1.15
Safari 18
Mac OS X 10.15.7
Desktop
25 days ago
Test name Executions per second
setProperty 32.5 Ops/sec
Object.assign 35.3 Ops/sec
.style 35.9 Ops/sec
.cssText 31.9 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="benchmark"></div>
Script Preparation code:
 
const numTests = 10000;
const el = document.getElementById("benchmark");
const css = (new Array(numTests)).fill(0).map(() => ({
   "opacity": `${Math.random()}`,
   "zIndex": `${Math.floor(Math.random() * 1000)}`
}));
Tests:

  • setProperty

    ​x
     
    let i = 0;
    ​
    while (i < numTests) {
      for (const s in css[i]) {
        el.style.setProperty(s.replace(/([a-z][A-Z])/g, (m) => m[0] + "-" + m[1].toLowerCase()), css[i][s]);
      }
      i++;
    }

  • Object.assign

     
    let i = 0;
    ​
    while (i < numTests) {
      Object.assign(el.style, css[i]);
      i++;
    }

  • .style

     
    let i = 0;
    ​
    while (i < numTests) {
      for (const s in css[i]) {
        el.style[s] = css[i][s];
      }
      i++;
    }

  • .cssText

     
    let i = 0;
    ​
    while (i < numTests) {
      console.log(i, css[i]);
        const s = Object.entries(css[i]).map(([key, value]) => `${key}:${value}`).join(";");
        el.style.cssText += s;
        i++;
    }