scroll-timeline icon indicating copy to clipboard operation
scroll-timeline copied to clipboard

Improve performance during resize

Open johannesodland opened this issue 6 months ago • 0 comments

(Addressing https://github.com/flackr/scroll-timeline/issues/239)

For each source element multiple elements are currently observed using ResizeObserver:

  • the source and its direct children
  • every subject where the source is the nearest scroll container.

The resize observer callback invokes updateMeasurements()

As a result updateMeasurements() might be called multiple times for each source element when resize observations are broadcasted. Currently, only the task to update timelines and animations is throttled. However, if there are multiple view timelines for the same source, the source and subject elements can be measured multiple times per resize update.

If updateMeasurements() has already been called, there's no reason to update the measurements until after the next animation frame. This PR throttles measurements during the resize observation broadcast by setting a flag once updateMeasurements() has been called for a source, and then clearing it at the start of the next animation frame.

johannesodland avatar Feb 12 '24 22:02 johannesodland