Interactivity API: Hydration causes long task

[westonruter]

Description

When there are a number of interactive blocks on the page, there is a good chance that browsers will experience a significant long task caused by init(), especially on lower-powered devices.

On a page with 20 interactive blocks and without any throttling on my HP Elite Dragonfly Chromebook (Intel i7), profiling a page load in DevTools results in a 64 ms long task (trace.cafe):

Not terrible, but when I throttle the CPU 6x then the task gets looooong at 309 ms (trace.cafe):

Reminder that a task is considered long if it is longer than 50 ms.

There is a discussion about lazy-hydration of interaction blocks in which @luisherranz acknowledges this:

It'd be great to delay the hydration of some of the interactive blocks to improve the time-to-interactive metrics of the site.

However, lazy hydration may not be sufficient if there are too many interactive blocks in the initial viewport. To deal with this, the work in the init() function could be broken up so that iteration over an interactive block yields after hydration.

Step-by-step reproduction instructions

I configured a site with 20 interactive blocks:

• 1 Search block with "buttonPosition":"button-only","buttonUseIcon":true,"isSearchFieldHidden":true
• 1 Navigation block with "openSubmenusOnClick":true,"overlayMenu":"always"
• 1 Navigation block with "openSubmenusOnClick":true,"overlayMenu":"never", where there are two submenus (each of which is an interactive block), so 2 interactive blocks here
• 1 File block with "displayPreview":true
• 15 Image blocks with "lightbox":{"enabled":true}

Then I opened DevTools and ran performance profiling with 6x CPU throttling and without any throttling.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.5-alpha-57345
Gutenberg 17.6.0-rc.1
HP Dragonfly Elite Chromebook
Twenty Twenty-Three theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[luisherranz]

Nice. Thanks for opening this, Weston. I also had the idea of trying a scheduler to break down the hydration 🙂

I know that Solid has had a port of React's scheduler for a while. I liked it because it is simple and has a fallback for scheduling.isInputPending. However, taking into account that the majority of low-level devices are old Android phones, we could also decide to stick to the native scheduling.isInputPending only.

I haven't looked into any of this yet, but happy to help though!

EDIT: Oh, I just noticed you already made a PR! Nice! Let's talk over there 😄

EDIT 2: I haven't read this post until now, very informative thank you. This is also simpler than I thought.