Adding load event listener for async script

This page is served with an script[async] and then the server pauses for a specified delay before flushing the rest of the document, which includes a synchronous inline script that tries to listen for the load event on that script by attaching an event handler via addEventListener. The asynchonous script seems to load in ~125ms when cached, meaning if there is a flush delay less than that, the event listener will successfully fire. Otherwise, if the flush delay is greater than that, the load event will fire before addEventListener is called. With cache enabled and disabled, try loading with 0ms, 100ms, 200ms, and 1000ms.

This also includes an alternative mechanism attaching a load event listener via addEventListener in which a MutationObserver is added in an inline blocking script that precedes the script[async]. This appears to be entirely reliable, even if it is not exactly elegant. It should work because MutationObserver is asynchronous but operates in microtasks, meaning the parsing of script will be observed before a subsequent non-microtask task to evaluate the loaded script. (Props to Noam Rosenthal for this approach.)

⏳ Waiting for script[async] to evaluate…

script[async] + script is waiting for load event on script[async]

⏳ Waiting for mutation observer to detect script[async] and then call addEventListener('load')