PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, October 15, 2022

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

 October 15, 2022     dom, event-loop, events, javascript, script-tag     No comments   

Issue

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>



Answered By - Kaiido
Answer Checked By - Robin (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing