Utilizzo corretto di Defer, async e script di moduli

Quando uno script dovrebbe essere caricato con Defer, async o come modulo JavaScript?

Gli script applicativi ordinati utilizzano Defer o moduli con importazioni esplicite. Solo le risorse indipendenti possono essere asincrone; L'inizializzazione attende gli elementi richiesti e gli errori esterni sono limitati alle funzioni opzionali.

Esempio pratico: "Sequenza asincrona"

La logica dell'applicazione viene caricata come modulo con importazioni chiare e inizializzata dopo l'analisi sintattica. Uno script di statistiche indipendente viene avviato in modo asincrono; se il suo provider diventa irraggiungibile, la navigazione e i moduli continuano a funzionare senza ritardi o perdita di funzioni principali.

Errore limitato

• Blocco sincrono del tempo di esecuzione degli script, degli errori di dipendenza e di inizializzazione in base allo stato della cache e al tempo di interazione con le funzioni principali.

• Errori o ritardi delle funzioni principali causati da script opzionali lenti o bloccati.

Dipendenza nota

• Errore limitato Uno script esterno opzionale può mancare o arrivare in ritardo senza impedire la navigazione, il contenuto principale o la funzionalità dei moduli.

Ordine asincrono

• Ordine asincrono Due file dipendenti vengono eseguiti in base al loro arrivo in rete e generano errori di inizializzazione solo in presenza di connessioni specifiche.

• Accesso anticipato al DOM Uno script cerca elementi prima che vengano analizzati e fallisce sporadicamente a seconda della sua posizione o della velocità della cache.

• Blocco esterno Il codice di analisi o dei widget è posizionato in modo sincrono nel percorso critico e ritarda l'intera pagina su un provider lento.

Tempo di caricamento appropriato

1. Tutti gli script sono classificati in base a dipendenza, requisiti DOM, criticità, origine e impatto accettabile in caso di errore.

2. Il codice dell'applicazione viene caricato come moduli ordinati o differito; i provider opzionali indipendenti vengono caricati in modo asincrono solo quando strettamente necessario.

3. I test con cache vuota, connessione lenta e terze parti bloccate verificano l'ordine, la funzionalità principale e i limiti di errore.

Quali domande rimangono aperte dopo aver trattato "defer, async e l'uso corretto dei moduli"?

Suddivisione dei bundle JavaScript in base all'utilizzo effettivo. Approfondisce il punto di controllo "Dipendenze note". La domanda chiave è: come suddividere i bundle JavaScript senza generare semplicemente molte nuove richieste di rete?

Viene offerta una prospettiva complementare Problemi con il file robots. txt che si presentano solo in combinazione con i meta tag robotsRisponde alla domanda: "Quali problemi sorgono dall'interazione tra robots. txt e Meta-Robots? ".

Se si desidera mettere in pratica "defer, async e l'uso corretto dei moduli", è possibile consultare il modulo seguente: Sistemi web robusti Si concentra su "Caricamento degli script e budget del thread principale" e "Dipendenze note".

Conclusione: Utilizzo corretto di defer, async e moduli

Gli attributi degli script descrivono le dipendenze e il tempo di esecuzione. Una classificazione mirata impedisce che un caricamento apparentemente più veloce comprometta l'ordine e la robustezza del codice.

Fonti e ulteriori informazioni

La classificazione di "utilizzo corretto di defer, async e moduli" si basa sulla seguente documentazione e sugli standard ufficiali.

• Timeline delle prestazioni Livello 2 – W3CLa specifica W3C definisce una timeline comune e le interfacce PerformanceEntry per gli eventi misurabili del browser.

• Standard HTML: Scripting – WHATWGIl Living Standard definisce il comportamento di script, moduli, async e defer, incluso l'ordine di esecuzione.