Will using async="" result in synchronous or asynchronous loading?

Asked

Viewed 1,688 times

5

I am using this function to load my scripts in a single row:

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 so in HTML:

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

The result is being:

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

That one async="", means it will load asynchronously or synchronously?

javascript async

2 answers

5


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

Follows 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");

This way you’ll use the async="" to avoid rendering blocking and callback will only inject the scripts that depend on jQuery if it has been loaded:

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

Defer and async difference

There is already a great question about respecting the order of statement that can be interesting to read too:

4

According to the MDN:

async HTML5

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

Dynamically inserted scripts run 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:

async HTML5

A boolean attribute indicating that the browser should, if possible, run the script asynchronously. This attribute should not be used if the src attribute is missing (i.e., for inline scripts). And if included, it will have no effect. Dynamically inserted scripts are executed asynchronously by default, so as to enable synchronous execution (i.e., scripts are executed in the order in which they were loaded) async = false

See browser compatibility for notes on Browser support. See also scripts asynchronous for asm.js.

Browser other questions tagged javascript async

You are not signed in. Login or sign up in order to post.