[cssom] Proposal: CSS.assign

[WebReflection]

It would be lovely to have the ability to define multiple CSS properties at once, without causing reflows or repaint during each property that might trigger those.

example

CSS.assign(element.style, {
  width: w + 'px',
  height: w + 'px',
  top: y + 'px',
  left: x + 'px',
  transition: (rand(100) + 900) +'ms',
  background: `rgba(
    ${rand(255)},
    ${rand(255)},
    ${rand(255)},
    ${Math.random() + 0.5}
  )`
});

implementation

The CSS.assign(style, ...objects) would mimic 100% Object.assign but it would grant that all properties are set at once, making multiple re-style, or updates, faster than ever.

The polyfill for this proposal would look something like this:

if (!CSS.assign)
  CSS.assign = Object.assign;

Thanks for considering this proposal.

[emilio]

But setting multiple properties never causes multiple repaints, unless you read in between. So I think this is WONTFIX as in it works as you want already.

[Loirooriol]

It would be lovely to have the ability to define multiple CSS properties at once, without causing reflows or repaint during each property that might trigger those.

Doesn't this happen already? AFAIK, unless you force it, styles are not applied synchronously.

For example, if I go to https://drafts.csswg.org/cssom/ and run

for (let i = 0; i < 100; ++i) {
  document.body.style.width = Math.random() * 1000 + "px";
  document.body.offsetLeft;
}

it takes like 8 seconds, because I'm forcing layout at each iteration. But if I remove the offsetLeft line, it's a single millisecond.

[emilio]

Yes, @Loirooriol articulated better what I wanted to say :)

Closing unless there's something we're missing.

[WebReflection]

unless there's something we're missing.

I can't believe I've never measured this, but I remember (long time ago) using a single style.cssText = ... assignment 'cause it was way faster than assigning many properties one after the other.

I kinda thought the reason was because of mutations, in terms of resizing, but of course I was wrong.

Thanks a lot for the quick come back, and apologies for my ignorance in this regard.