Re: [whatwg/dom] Proposal: asynchronous event listeners (Issue #1308)

krzksz left a comment (whatwg/dom#1308)

After chatting with @mmocny, I'd like to reignite this discussion. I believe this API would be a significant enabler for optimising the Interaction To Next Paint metric.

One of the emerging techniques to do so is delaying the non-critical work until after the interaction is handled. This can have many flavours including:
- Yielding to the main thread using the [Scheduler.yield](https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield).
- Deferring the work using the [`requestAnimationFrame(() => setTimeout(..., 0))`](https://web.dev/articles/optimize-inp#yield_to_allow_rendering_work_to_occur_sooner) combo or the [`postTask()` API](https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/postTask).
- More robust patterns like [`yieldUnlessUrgent`.](https://kurtextrem.de/posts/improve-inp#exit-event-handlers-yieldunlessurgent)

There are many examples of use cases. The one we're seeing on Shopify the most is product swatches interactions:
1. User clicks on a swatch.
2. [Critical] UI updates to a different color or size and the gallery updates.
3. [Deferred] The URL is updated using the `history.replaceState()` to reflect the new variant ID.

Pretty much every single analytical script (e.g. GTM, Meta) proxies the `history.replaceState()` to listen to the URL updates. This makes it very expensive and causes bad INP unless we yield.

My hope is that providing a simple extension to the `addEventListener` that:
- fallbacks gracefully to a standard listener for older browsers,
- retains the `event.target` reference even if the node is removed from the DOM (already the case for standard listeners),
- guarantees execution before document unloads,
would allow both 1st and 3rd party developers to defer their work after the interaction more easily.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1308#issuecomment-3480590472
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1308/3480590472@github.com>