javascriptdomeventsevent-loopscript-tag

Why does JS seem to empty the microtasks queue before the closing </script> tag?


While looking at this code:

<script>
    console.log(1);
    new Promise(r=>r()).then(() => console.log(2));
</script><script>
    console.log(3);
</script>

it seems like 2 should be printed after 3, because it should have been queued as a microtask, just like it behaves here:

    <script>
        console.log(1);
        new Promise(r=>r()).then(() => console.log(2));
        console.log(3);
    </script>

I can't find a good explanation - why would the JS engine bother to empty the microtask queue before continuing to process the next script element?


Solution

  • It's not the JS engine but the DOM one, which after running a classic script has to clean up after running a script (step 8). This clean up algorithm does a microtask checkpoint.

    1. If the JavaScript execution context stack is now empty, perform a microtask checkpoint.

    So the microtask isn't really checked "before" the </script> end tag, but rather right after the script got executed (which technically happens when the end tag is met).

    You can even make some funky stuff like forcing a MutationObserver to notify of changes in the DOM right in the middle of parsing an element's content This can come handy for testing.:

    <script>
      function myObserver(mutationsList) {
        for (let mutation of mutationsList) {
          for (let n of mutation.addedNodes) {
            if (n.id === 'parent') {
              console.log("innerHTML: ", n.innerHTML);
            }
          }
        }
      }
      var observer = new MutationObserver(myObserver);
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    </script>
    <div id="parent">
      <span>This will be parsed</span>
      <script>/* This script forces the MutationObserver to kick its notifications */</script>
      <span>Not yet parsed</span>
    </div>