Throttling/pausing of Mutation Events

I’m just wondering whether there has been any effort, or rejected effort, to add throttling and/or grouping to the MutationObserver.

I’m recording a website which has an image carousel which transitions images via a setInterval script, so every second, dozens of new mutation events are being generated without any user actions. All the mutations are happening on the style attribute, so there’s quite a lot of commonality between the events, which suggests a few different ‘packing’ strategies, but before delving into this level of complexity, I’m wondering whether an API method to pause mutation tracking would be useful?

This could be triggered by e.g. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API so that if a user isn’t actually on the page, then mutation events will be batched up until they return.

[eoghanmurray]

So the only other possible change would be to create a separate Page Visibility observer, which could e.g. set a class/state on the <iframe> which could be used by the replayer to indicate that the page is not currently visible to the end user. I feel like that’s a separate proposal though.

Otherwise, there’s not much more to it; the changes I’ve made in #224 enables me to do all the things we need to achieve (see sample code above) The idea with ‘config settings’ is that users of rrweb wouldn’t have to use the new freezePage method, but that the logic could be moved into rrweb and behaviour enabled in config, e.g. setting autofreezonBlur: true to call freezePage whenever the document is hidden. or setting autofreezeAfterSeconds to 10 would enable the pause_timeout functionality shown in the sample above.

I’ve sketched out where these config changes could go in https://github.com/statcounter/rrweb/commit/9f24c10e4a88a50195659a78316abd383606f61e

[Yuyz0112]

Hi @eoghanmurray, thanks a lot for the PRs.

Would you like to explain more about the full plan of doing this? Like the data structure, events, browser API, etc.