Prevent multiple style recalculations and improve performance by grouping DOM reads and writes

Is your feature request related to a problem? Please describe. When requesting offsetLeft (or other DOM reads) in the beforeUpdate callback the browser has to recalculate styles when the styles are changed in a further update. See below how this looks in dev tools with multiple components (the second one is without the DOM reads, you can see the recalculation is done after every style has been updated).

I’ve created a REPL: https://svelte.dev/repl/1977c00357cc496eae5ec1f2a9d23675?version=3.12.1

Multiple recalculations because of DOM reads

Single recalculation

This slows down the frame render.

Describe the solution you’d like If we can schedule all reads before the update happens DOM reads are free (the browser has prepared the frame) and don’t cause additional style recalculations. This might require setting up a global draw loop so web components created with Svelte all use the same read/write order.

Describe alternatives you’ve considered I’ve moved the DOM read to afterUpdate while that does group part of the writes we only get the info after the update while we need it before.

How important is this feature to you? Very. It’s super useful to be able to access layout information at the start of the frame (it’s free at that moment) and this can be used to for example calculate the width of a component and then layout its children accordingly (simulating component queries) without affecting render performance. I use this extensively in FilePond.

[frederikhors]

Oh my gosh this stale!

[frederikhors]

Nope