Home/ Questions/Q 6167065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:26:52+00:00

I created the example below where the page loads the temp.js dynamically at the

  • 0

I created the example below where the page loads the temp.js dynamically at the bottom of the HTML page. The temp.js has a little sleep function which binds up browser for 3 seconds before logging ‘Script Loaded’. At the very bottom of the HTML page it logs a ‘Page Loaded’

Now, knowing what I know about browsers, downloading resources and the single threaded nature of JS I thought this would happen.

  1. HTML is displayed
  2. console.log ‘Page Loaded’
  3. About a three seconds wait whilst temp.js does it stuff
  4. console.log telling me ‘Script Loaded’

but what in fact happens is this

  1. console.log ‘Page Loaded’ (almost instantly)
  2. Blank page for about three seconds
  3. HTML is displayed and console.log telling me ‘Script Loaded’

Is this the behaviour you would have expected?

function sleep (ms) {
  var now = (new Date()).getTime ();
  while ((now + ms) > ((new Date()).getTime ())) {
  }
}
sleep (3000);
console.log ('Script Loaded');

<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>querySelectorAll</title>
  </head>
  <body>
    <ul>
      <li><a href="">One</a></li>
      <li><a href="">Two</a></li>
    </ul>

    <div id="nick">
      <img src="image.png" alt="" width="10" height="10" />
      <img src="image.png" alt="" width="10" height="10" />
      <img src="image.png" alt="" width="10" height="10" />
    </div>
    <!-- <script type="text/javascript" src="temp.js"></script> -->
    <script type="text/javascript">
      (function() {
        var e = document.createElement('script');
        e.src = 'temp.js';
        e.async = true;
        document.getElementsByTagName("head")[0].appendChild(e);
      })();
    </script>
    <script type="text/javascript">
      console.log('Page Loaded');
    </script>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What happens

    • Some HTML is parsed
    • <script> block 1 is parsed and it adds a new script tag to the <head>
    • <script> block 2 is parsed and it logs page is loaded
    • <script> block in head is parsed and it runs your blocking sleep function
    • 3 seconds pass
    • Script loaded is logged
    • <head> block has finished parsing and it renders the <body>
    • Page is displayed.

    Change

    document.getElementsByTagName("head")[0].appendChild(e);

    To

    document.getElementsByTagName("body")[0].appendChild(e);

    And the HTML page will load first.

    The problem is that all scripts in the <head> have to be loaded and run before the HTML body is rendered

    • 0