Browser Script Tag "async" attribute not working

Question

I'm dynamically creating script tags and setting the async attribute to true and it shows up in the dom correctly but looking at the network tab shows a different story. Why is there such a big gap between the initial files being loaded and then the script tags to be dynamically loaded in?

DOM

Network Tab

index.html

<head>
  <meta charset="UTF-8">
  <title>React App</title>
  <script>
    function loadjscssfile(BASE, filename, filetype) {
      if (filetype == "js"){ //if filename is a external JavaScript file
          filename = BASE + jsManifest[filename];
          var fileref = document.createElement('script')
          fileref.setAttribute("type","text/javascript")
          fileref.setAttribute("src", filename)
          fileref.setAttribute("async", "true")
      }
      else if (filetype == "css"){ //if filename is an external CSS file
          filename = BASE + cssManifest[filename];
          var fileref = document.createElement("link")
          fileref.setAttribute("rel", "stylesheet")
          fileref.setAttribute("type", "text/css")
          fileref.setAttribute("href", filename)
      }
      if (typeof fileref != "undefined")
          document.getElementsByTagName("head")[0].appendChild(fileref)
    }
  </script>
  <!-- dynamically load hashed CSS files -->
  <script src="./css-manifest.js"></script>
  <script src="./js-manifest.js"></script>
  <script>
    var BASE = '../stylesheets/';

    for (var key in cssManifest) {
      loadjscssfile(BASE, key, 'css');
    }
  </script>
</head>
<body>
  <div id="app"></div>
  <!-- dynamically load hashed JS files -->
  <script>
    var BASE = '../prod/';
    for (var key in jsManifest) {
      loadjscssfile(BASE, key, 'js');
    }
  </script>
</html>

idmean · Accepted Answer · 2016-12-25 21:40:08Z

1

There’s nothing wrong with the async behaviour here:

What you are trying to prevent with the async attribute is parser blocking. If you use the async attribute, you are saying: I don't want the browser to stop what it's doing while it's downloading this script. I know that this script doesn't really depend on anything being ready in the DOM when it runs and it also doesn't need to be run in any particular order.

– https://css-tricks.com/async-attribute-scripts-bottom/

And that basically means you don't care in which order your two JS files will be executed.

The gap you highlighted with these red arrows is the time the browser needs to compile (yes, browsers do JIT) and run your JavaScript code. (About 250ms doesn’t seem unreasonable from parsing to executing JavaScript code.) The scripts can not start loading before your inline JavaScript codes hasn’t inserted the according tags.

answered Dec 25, 2016 at 21:40

idmean

15k9 gold badges63 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clement Over a year ago

awesome! thanks for clarifying all that up for me :)

Collectives™ on Stack Overflow

Browser Script Tag "async" attribute not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related