inline styles vs. setProperty

Benchmark created on

Preparation HTML

<div id="node" style="transform: var(--transform)"></div>

Setup

const node = document.getElementById("node");
function animate(cb, ms) {
  let start = performance.now();
  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / ms;
    if (timeFraction > 1) timeFraction = 1;
    cb(timeFraction);
    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
  });
}

Test runner

Ready to run.

Testing in
TestOps/sec
directly update inline styles
let translate = 0;
animate(() => {
	node.style.transform = `translate(${++translate}px, 0px)`
}, 5);
ready
update inline style custom properties
let translate = 0;
animate(() => {
	node.style = `--transform: translate(${++translate}px, 0px)`;
}, 5);
ready
setProperty
let translate = 0;
animate(() => {
	node.style.setProperty("--transform", `translate(${++translate}px, 0px)`);
}, 5);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.