How to guarantee that deferred JS scripts have executed?

When readyState is at least interactive, that means that the document has been fully parsed, and that all the elements in the source HTML now exist in the DOM.

Usually, people implementing this solution are doing so because they're trying to attach listeners to elements, and need to wait for all elements to exist in the DOM - and so all they need to do is check document.readyState === 'loading'.

If you also want to wait for <script type="module"> scripts to run, that's a different problem, with a different solution.

The best way by far would be to have a single entry point for your app's in a module, so that you don't have to worry about loading order at all - it'll just work.

If you really have to determine when all module scripts have run from a non-module script (which I wouldn't recommend), you'd have to iterate over them and listen to their load events.

// run this at the end of the body -
// once all script tags exist, but before they've run
Promise.all(
  [...document.querySelectorAll('script[type="module"]')]
    .map(script => new Promise(
      resolve => script.addEventListener('load', resolve)
    ))
)
  .then(() => {
    // all module scripts are loaded
   })

But that's quite convoluted and probably isn't a good approach.

If you listen to the load event for the window instead, you'll also be waiting for all other resources to load as well (images and stylesheets and such) which isn't desirable.