Memory leaks in Iframe and BlockPreview

[kevin940726]

Description

While playing with ideas of potentially improving the performance of <BlockPreview>, I discovered that the <Iframe> component from the block-editor package is leaking memory.

This is especially noticeable when loading lots of patterns, which render <BlockPreview>s and <Iframe>s under the hood. Memory leaks can cause the page to feel heavy and unresponsive, then eventually stop working when it reaches the browser's limits. This is also worse in Site Editor where we rely on client side navigation and never give the browser chance to nuke everything.

I have some leads regarding identifying the code that causes the leaks, but none are proven yet. I can continue to find them if given more time, but decided to open an issue first for awareness.

Step-by-step reproduction instructions

1. Open a block editor (post or site)
2. Open your desired memory leak detection tool. For chrome devtools it can be the "Performance Monitor" tab and observe the live document frames or JS heap size, or it can also be the "Memory" tab and take snapshots of the before and after then compare them.
3. Open the global inserter and load a set of block patterns (which renders <BlockPreview> -> <Iframe>).
4. Close the inserter to unmount the patterns (thus unmounting <BlockPreview> and <Iframe>)
5. Repeat the process of steps (2) ~ (3) for a few times
6. Notice that the memory keeps growing and never gets garbage collected. The number of document frames also keeps increasing and never gets freed.

Screenshots, screen recording, code snippet

Using the "Performance Monitor" tab:

Kapture.2023-08-07.at.14.50.24.mp4

Using the "Memory" tab record the heap snapshots:

Kapture.2023-08-07.at.15.02.21.mp4

Environment info

• WordPress trunk, gutenberg trunk (production build)
• macOS, Microsoft Edge, and Brave.
• Theme: twentytwentytwo

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

[t-hamano]

Here's an example of the measurement on the Patterns page, with the WooCommerce plugin enabled, recording CPU usage and JS head size changes when that category is accessed. In my environment, there seems to be so much load that the scroll bars are inoperable for a little while 😅

80b5c45b84f0560d30957ceb0467d445.mp4

[kevin940726]

@t-hamano Yeah, it's reported in #50695, which I failed to mention in the description 😅.

[kevin940726]

Just to note that I think I found (partial?) solutions to this and I will share them in a PR soon!