CODEWITHSUNDEEP
javascript
Clement
Clement

Reputation: 4811

Browser Script Tag "async" attribute not working

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

script tag attributes

Network Tab

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>

Upvotes: 1

Views: 1355

Answers (1)

idmean
idmean

Reputation: 14905

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.

Upvotes: 1

Related Questions