Aggiungere JavaScript alle pagine HTML

Corso JavaScript: Aggiungere Script alle pagine HTML
Corso JavaScript: Aggiungere Script alle pagine HTML

Gli attributi async e defer

Per evitare che il caricamento di un file esterno influisca troppo sulla velocità di caricamento percepita possiamo facciamo ricorso agli attributi async o defer.

Il problema è che nel momento in cui il browser sta scaricando una pagina HTML e trova un riferimento a un file esterno inizia subito a scaricare questo secondo file, bloccando il caricamento del documento principale e allungando il tempo in cui vediamo solo una pagina vuota.

Gli attributi async e defer servono a comunicare al browser in che ordine vogliamo che vengano caricati ed eseguiti i file JavaScript esterni:

<!doctype html>
<html>
<head>
    <title>Corso di JavaScript</title>
    <script src="main-async.js" async></script>
    <script src="main-defer.js" defer></script>
    <script src="main.js"></script>
    <meta charset="UTF-8">
<body>
<h1>Corso di JavaScript per aspiranti web developer</h1>
<p>
    Questa è una semplice pagina di esempio
    che utilizzeremo come base per imparare
    a utilizzare JavaScript.
</p>
</body>
</html>

Nell’esempio qui sopra carichiamo tre file esterni:

  • main-async.js, caricato con l’attributo async.
  • main-defer.js, caricato con l’attributo defer.
  • main.js, caricato senza attributi async e defer.

Il primo file che viene eseguito è main.js, questo in barba all’ordine in cui sono scritti, ma perché accade?

Gli effetti di async e defer nel caricamento e nell’esecuzione di uno script esterno.

Senza attributi async e defer il file JavaScript esterno viene caricato ed eseguito nel momento in cui il browser, interpretando il documento HTML, ne trova il riferimento, anche se questo blocca il caricamento della pagina HTML.

Con l’attributo async il file JavaScript esterno viene caricato parallelamente all’interpretazione del documento HTML e viene eseguito soltanto quando è stato completamente caricato.

Con l’attributo defer il file JavaScript viene caricato parallelamente all’interpretazione del documento HTML ma la sua esecuzione è rimandata al termine di tutte le altre operazioni.

Questo articolo è parte della collana JavaScript: Guida di riferimento per aspiranti web developer.

Continua a leggere questa collana:

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.