flackr / scroll-timeline

A polyfill of ScrollTimeline.
Apache License 2.0
951 stars 92 forks source link

Improve performance during resize #247

Open johannesodland opened 7 months ago

johannesodland commented 7 months ago

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

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

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.