Caricamento asincrono di file JS

By Sean Bone 2 Mar, 2014

Normalmente, quando uno script JS viene incluso attraverso HTML, il browser si ferma finché non ha interpretato lo script, poi continua con il resto del file HTML.
Questo può causare rallentamenti al caricamento della pagina percepito dall’utente, specialmente se lo script in questione è molto grande o deve fare operazioni lunghe e laboriose.
Un primo ‘trucco’ per migliorare la percezione della pagina è quello di includere lo script alla fine di <body> piuttosto che nel <head>.
Questo permette alla maggior parte della pagina di caricare prima di cominciare con lo script.

<html>
        <head>
            <title>Esempio</title>
            <script src="http://www.seanbone.ch/example.js" language="javascript" type="text/javascript"></script>
            <!-- questo tag obbligherà l'utente a sorbirsi una paginata bianca finché lo script ha terminato l'esecuzione -->
        </head>
        <body>
            <!-- contenuto della pagina... -->
            <script src="http://www.seanbone.ch/example.js" language="javascript" type="text/javascript"></script>
            <!-- qui, invece, la maggior parte della pagina è già carica, e l'utente può cominciare a leggere -->
        </body>
</html>

Un altro metodo è attraverso JavaScript stesso. Questo è molto utile anche perché permette di scaricare un certo script solo se necessario, ma è da utilizzare con precauzione.
Il motivo per cui i browser si bloccano per eseguire gli script è per evitare situazioni di concorrenza fra due script (race conditions), dove uno script esegue prima (o in contemporanea)
di un’altro, potenzialmente causando errori. Questo fatto è da tenere a mente quando si usa questa tecnica.
Per caricare un’altro script attraverso JavaScript, usiamo una funzione per creare un tag <script> e allegarlo alla pagina HTML:

var loadScript = function(fileName, callback) { 
    var scriptTag = document.createElement("script"); 
    scriptTag.src = fileName; 

    if (callback) { 
         scriptTag.onload = callback; 
        scriptTag.onreadystatechange = function() { 
            if (scriptTag.readyState == 4) { 
                    callback(); 
            } 
        } 
    } 
    document.getElementsByTagName("head")[0].appendChild(scriptTag); 
}

Creiamo una funzione chiamata loadScript che prende due argomenti: una stringa contentente l’indirizzo del file da caricare (obbligatoria) e una funzione (opzionale) da eseguire una volta caricato ed eseguito lo script.
Per prima cosa, la funzione crea un’elemento HTML <script> e vi assegna come sorgente l’indirizzo del file. In seguito, se è stata fornita una funzione come secondo argomento,
viene assegnata alla proprietà onload del tag.
Infine, lo script viene allegato in fondo all’elemento <head> del nostro file HTML.

Quindi, se per esempio avessimo due script molto grandi, e dovremmo decidere con JavaScript quale va eseguito, potremmo risparmiarci di caricare il secondofile per nulla:

if (condizione == True) {
     loadScript("script1.js");
} else {
    loadScript("script2.js");
}

Semplice, ed efficace!

Link utili

02 Mar 2014