Script sincroni e asincroni in HTML: differenze pratiche nel caricamento delle librerie

Introduzione

Quando inserisci uno script in una pagina HTML, non stai solo aggiungendo funzionalità: stai anche influenzando l’ordine di esecuzione del codice e, di conseguenza, le prestazioni percepite dall’utente. La differenza tra script sincroni e script asincroni diventa molto importante soprattutto quando devi caricare librerie esterne, come analytics, widget di chat, mappe o strumenti di tracking.

In questo tutorial vediamo un sotto-argomento molto pratico: come scegliere tra caricamento sincrono e asincrono quando integri librerie esterne nella pagina. Non ci limiteremo alla teoria, ma costruiremo un esempio concreto per capire cosa succede nel browser e come evitare errori comuni.

L’obiettivo è semplice: capire quando uno script blocca il parsing dell’HTML, quando invece viene scaricato in parallelo, e come usare questa differenza per integrare una libreria esterna senza rallentare inutilmente la pagina.

Codice completo

Nel seguente esempio trovi una pagina HTML con due approcci: uno script inserito in modo sincrono e uno caricato con l’attributo async. Il codice è volutamente semplice, ma rappresenta un caso realistico: una libreria esterna che inizializza un widget dopo il caricamento.

<h1>Demo: caricamento sincrono e asincrono di una libreria</h1>

<p>Apri la console del browser per osservare l´ordine di esecuzione.</p>

<!-- Script sincrono: il parsing dell´HTML si ferma finché il file non è scaricato ed eseguito -->
<script>
  console.log("1. Script sincrono eseguito subito, prima di continuare il parsing.");
</script>

<div id="widget">Contenuto della pagina</div>

<!-- Script asincrono: il browser lo scarica in parallelo e lo esegue appena pronto -->
<script async src="https://example.com/libreria-esterna.js"></script>

<script>
  // Simulazione di inizializzazione dopo il caricamento della libreria
  window.addEventListener("load", function () {
    console.log("2. Tutta la pagina è stata caricata.");
    
    const widget = document.getElementById("widget");
    if (widget) {
      widget.innerHTML = "Widget inizializzato dopo il caricamento.";
    }
  });
</script>

Se vuoi simulare meglio la differenza tra caricamento sincrono e asincrono in un ambiente locale, puoi usare un file JavaScript esterno con un piccolo ritardo artificiale. Ecco un esempio di file libreria-esterna.js:

console.log("Libreria esterna caricata.");

function inizializzaWidget() {
  const widget = document.getElementById("widget");
  if (widget) {
    widget.textContent = "Widget pronto: libreria esterna inizializzata.";
  }
}

inizializzaWidget();

Spiegazione

1. Cosa fa uno script sincrono

Uno script sincrono viene eseguito nell’ordine in cui appare nel documento. Se lo script è esterno, il browser deve prima scaricarlo, poi eseguirlo, e solo dopo può continuare a leggere il resto dell’HTML. Questo significa che un file JavaScript lento può bloccare il rendering della pagina.

Nel codice di esempio, il primo <script> senza attributi è sincrono. Quando il browser lo incontra, si ferma, lo esegue, e solo dopo procede con il resto del markup.

2. Cosa fa uno script asincrono

Uno script con attributo async viene scaricato in parallelo al parsing dell’HTML. Appena il file è disponibile, il browser lo esegue immediatamente, anche se non ha ancora finito di leggere tutta la pagina. Questo riduce i blocchi, ma introduce una variabile importante: l’ordine di esecuzione non è garantito.

Per questo motivo, async è perfetto per script indipendenti, come analytics o tracker, ma meno adatto quando uno script dipende da un altro già presente nella pagina.

3. Perché l’ordine conta nelle librerie esterne

Supponiamo di voler caricare una libreria esterna che definisce una funzione globale, per esempio inizializzaWidget(). Se un altro script tenta di chiamarla prima che la libreria sia pronta, avrai un errore. Con uno script sincrono questo rischio è minore, perché l’esecuzione segue l’ordine del documento. Con async, invece, la libreria potrebbe arrivare dopo o prima rispetto ad altri script, a seconda della rete e della cache.

Ecco il punto chiave:

• sincrono = ordine prevedibile, ma possibile blocco del parsing;
• asincrono = migliore reattività, ma ordine non deterministico;
• librerie dipendenti tra loro = attenzione, spesso async non è la scelta giusta.

4. Quando usare davvero async

Usa async quando lo script non dipende dal DOM già pronto o da altri script caricati prima. Alcuni esempi pratici:

• strumenti di analisi e monitoraggio;
• chat widget esterni;
• banner pubblicitari;
• script di terze parti che lavorano in modo autonomo.

Se invece il tuo script deve leggere elementi della pagina o dipende da una libreria precedente, valuta altre strategie, come lo script posizionato in fondo al documento oppure l’uso di defer in casi più adatti al caricamento ordinato.

Best practice

• Usa async per script indipendenti: riduci il blocco del rendering quando il codice non ha dipendenze.
• Evita async per script con dipendenze: se un file deve essere caricato prima di un altro, l’ordine non garantito può causare bug difficili da riprodurre.
• Controlla sempre la console: errori di caricamento o di timing emergono spesso solo durante il test reale.
• Non assumere che il DOM sia pronto: uno script asincrono può eseguire prima che certi elementi siano disponibili. Se devi manipolare il DOM, aspetta l’evento giusto o verifica l’esistenza degli elementi.
• Preferisci librerie leggere: anche con async, un file troppo pesante può rallentare l’esperienza utente se esegue operazioni costose subito dopo il download.
• Documenta le dipendenze: nei progetti di team, specifica chiaramente quali script devono essere caricati prima di altri.

Riepilogo

La differenza tra script sincroni e asincroni non è solo teorica: influisce direttamente su prestazioni, ordine di esecuzione e affidabilità del codice. Uno script sincrono è prevedibile, ma può bloccare il caricamento della pagina. Uno script asincrono è più performante dal punto di vista del rendering, ma non garantisce l’ordine di esecuzione.

Quando integri una libreria esterna, la scelta corretta dipende dal suo ruolo:

• se è indipendente, async è spesso la soluzione migliore;
• se dipende da altri script o dal DOM già pronto, serve una strategia più controllata;
• se l’ordine è fondamentale, evita di affidarti al caricamento asincrono senza una logica di coordinamento.

Capire questo comportamento ti aiuta a scrivere pagine più robuste, più veloci e più facili da mantenere.

Approfondisci con risorse ufficiali

• MDN Web Docs - <script>: documentazione completa sugli attributi async, defer e sul comportamento degli script.
• MDN Web Docs - HTML parsing: utile per capire come il browser interpreta il documento e quando si ferma per eseguire uno script.
• WHATWG HTML Living Standard: specifica ufficiale del comportamento degli elementi HTML, incluso <script>.
• web.dev: articoli pratici sulle prestazioni web e sulle strategie di caricamento delle risorse.