Using async="" will result in a synchronous or asynchronous load?

Navigation
5

I'm using this function to load my scripts into a single line: 

function loadJS () {
    for (var i = 1, max = arguments.length; i < max; i++) {
        var file = document.createElement("script");
        file.async = arguments[0];
        file.src = arguments[i]+".js";
        document.body.appendChild(file);
    }
}

So I do this in HTML: 

<script onload="loadJS(true, 'js/carta', 'js/script')" src="js/load.js"></script>

The result is: 

<script async="" src="js/carta.js"></script>
<script async="" src="js/script.js"></script>

Does this async="" mean it will load asynchronously or synchronously?

    
asked by anonymous 24.08.2017 / 20:07

2 answers

5

async="" is asynchronous even, that is, it will not cause rendering locks and one script will not wait for the other, which can be bad if a <script src> depends on the other <script src> , however it is preferable to use the async , as long as you know how to organize, an example I formulated:

Follow the code: 

//Esta função carrega os arquivos javascript
function loadJs(url, callback) {
    var js = document.createElement("script");

    //Verifica se o callback é uma função
    if (typeof callback === "function") {
        var isReady = false;

        //Executa se for carregado no onload ou readystatechange
        function ready() {
             if (isReady) return;

             //Bloqueia execução repetida do callback
             isReady = true;

             //Chama o callback
             callback();
        }

        js.onload = ready;

        /*Internet explorer (http://stackoverflow.com/q/17978255/1518921)*/
        js.onreadystatechange = function() {
            if (/^(complete|loaded)$/.test(js.readyState)) ready();
        }
    }

    js.async = true;
    js.src  = url;
    document.body.appendChild(js);
}

loadJs("js/jquery.min.js", function() {
    loadJs("js/bootstrap.js"); //Depende do jQuery
    loadJs("js/plugin.js"); //Depende do jQuery
});

//Não depende do jQuery
loadJs("js/outros-scripts.js");

In this way you will use async="" to avoid rendering blocking, and the callback will only inject jQuery-dependent scripts if it has been loaded: 

function() {
    loadJs("js/bootstrap.js"); //Depende do jQuery
    loadJs("js/plugin.js"); //Depende do jQuery
}

Difference of defer and async

There is already a great question about respecting the order of declaration that might be interesting to read as well:

24.08.2017 / 20:19
4

According to MDN :

  

HTML5 async

     

A boolean attribute indicating that the browser should, if   possible, execute the script asynchronously. This attribute must not   be used if the attribute attribute is absent (i.e. for inline scripts). If   it is included in this case it will have no effect.

     

Dynamically inserted scripts execute asynchronously by default, so to   turn on synchronous execution (i.e. scripts execute in the order they   were loaded) set async=false See Browser compatibility for notes on   browser support. See also Async scripts for asm.js .

Translating:

  

HTML5 async

     

A Boolean attribute that indicates that the browser should, if   execute the script asynchronously. This attribute shall not   be used if the src attribute is missing (that is, for inline scripts). And if it is included, it will have no effect.   Dynamically inserted scripts run asynchronously by default to enable synchronous execution (that is, scripts run in the order they were loaded) set async = false

     

See browser compatibility for notes in the   Browser support. See also Async scripts for asm.js .

    
24.08.2017 / 20:24
Removal of excess white space What is a Engine?