JavaScript async & defer: run a script asynchronously

Question

As far as I am aware, in the script element, the async attribute allows the script to download asynchronously (similar to images), while the defer causes the script to wait until the end before executing.

Suppose I have two scripts to include:

<script src="library.js"></script>
<script src="process.js"></script>

I would want them both to proceed asynchronously, and I would want process.js to wait until the end to start processing.

Is there a way to get the library.js script to run asynchronously?

Note

I see there appears to be some discrepancy between different online resources as to the actual role of the async attribute.

MDN & WhatWG suggest that it means that the script should execute asynchronously. Other online resources suggest that it should load asynchronously, but still blocks rendering when it is executed.

So you want library.js to finish running before process.js starts? — CertainPerformance
– CertainPerformance, Commented Nov 13, 2018 at 5:01
@CertainPerformance Good point. Yes, I would expect process.js to have access to the library. — Manngo
– Manngo, Commented Nov 13, 2018 at 5:03
@Phil I had a look at that link, and I normally regard MDN as authoritative. However, other sites I have looked at definitely suggest that async refers to loading the script. — Manngo
– Manngo, Commented Nov 13, 2018 at 5:07
@Phil. Pity. I see that the whatwg.org standard also refers to executing the script … this is getting a little confusing. — Manngo
– Manngo, Commented Nov 13, 2018 at 5:10

Mamun · Accepted Answer · 2018-11-13 05:58:06Z

3

I found Sequential script loading in JavaScript which might help you:

(function(){
  
  //three JS files that need to be loaded one after the other
  var libs = [
    'https://code.jquery.com/jquery-3.1.1.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.js'
  ];
  
  var injectLibFromStack = function(){
      if(libs.length > 0){
        
        //grab the next item on the stack
        var nextLib = libs.shift();
        var headTag = document.getElementsByTagName('head')[0];
        
        //create a script tag with this library
        var scriptTag = document.createElement('script');
        scriptTag.src = nextLib;
        
        //when successful, inject the next script
        scriptTag.onload = function(e){
          console.log("---> loaded: " + e.target.src);
          injectLibFromStack();
        };    
        
        //append the script tag to the <head></head>
        headTag.appendChild(scriptTag);
        console.log("injecting: " + nextLib);
      }
      else return;
  }
  
  //start script injection
  injectLibFromStack();
})();

edited Nov 13, 2018 at 5:58

answered Nov 13, 2018 at 5:52

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

CertainPerformance Over a year ago

So the key is that the load event is fired by the <script> element when all of the script's synchronous actions are complete, cool

Manngo Over a year ago

Not really. The question was about the async and defer attributes. MDN states that scripts inserted using document.createElement, as in the sample above, are executed asynchronously by default.

Flimm · Accepted Answer · 2018-11-13 05:20:39Z

1

Both defer and async affect when a script is executed, not when a script is downloaded. I think the confusion comes from the fact that some documentation is a bit sloppy with terms, and the term loaded is unclear as to whether it refers to the fetching of the resource, or the execution of it.

To get library.js to run asyncronously without waiting for the document to load, use async attribute, and to get process.js to wait until document has been parsed, use defer:

<script src="library.js" async></script>
<script src="process.js" defer></script>

Note that library.js is not guaranteed to run before process.js, although it probably will.

answered Nov 13, 2018 at 5:20

Flimm

154k49 gold badges282 silver badges295 bronze badges

1 Comment

Manngo Over a year ago

I have had a look at the WhatWG Specs, and raised an issue regarding the ambiguity. It appears that async loads the script asynchronously, but still executes synchronously.

Collectives™ on Stack Overflow

JavaScript async & defer: run a script asynchronously

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related