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

user_3237334 0
Viewed 61

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?

script-tag event-loop events dom javascript
1 Answers

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>

user_37027970
Related