Avoid using `unload` event listener on `window`.
pope opened this issue · comments
In https://github.com/preactjs/preact-devtools/blob/master/src/adapter/hook.ts#L146, an unload event listener is used. The problem is that attaching an event handler/listener to window or document's unload event prevents browsers from using in-memory page navigation caches, like Firefox's Back-Forward cache or WebKit's Page Cache. Since this an extension - this penalty gets applied to every web page.
Instead, would it be possible to use the pagehide event handler? That does not tamper with the caches.
TIL, wasn't aware that using the unload event blocks navigation caches 👍 Need to check how the pagehide event interacts with iframes.
In what way are you interested in iFrame interactions and how pagehide works with them?
The extension currently supports inspecting apps that run in iframes and not the main context. The name pagehide seems to suggest that it's bound to a page instead of a frame.
Here's a silly app that logs that the pagehide event does get triggered on the iFrame's window when I remove the iFrame from a page: https://stackblitz.com/edit/js-u9ppkg?file=index.js. Of note, pagehide nor unload fire on the iframe element or the page's window object. Not sure if that's what you were concerned about or not though.
This also seems to confuse Lighthouse in Chrome's Dev Tools as it's complaining about the website registering one but is unable to find the source of it:
Took me a bit to figure out where it came from, but hopefully this helps others figure out why Lighthouse is complaining!
@pope That's perfect. It only needs to be triggered in the same frame where the devtools connection has been established, so we're all good 👍