JavaScript - Script Tag - Async & Defer

Durante il test di una pagina Web o del sito, può esserci un requisito per osservare il tempo trascorso nel caricamento delle funzionalità. Ad esempio, aggiungendo le funzionalità aggiunte a un certo limite. In tali casi, i tag di script "asincrone" E "differire"Gli attributi svolgono un ruolo vitale nell'aiutare lo sviluppatore in larga misura.

Questo articolo descriverà la differenza tra gli attributi asincroni e Defer usando JavaScript.

JavaScript - Script Tag - Async & Defer

IL "asincrone" E "differire"Sono gli attributi del""Tag, ed entrambi hanno funzionalità diverse:

• IL "asincrone"L'attributo consente a DOM di recuperare ed eseguire lo script durante l'esecuzione dell'HTML.
• IL "differire"Attributo scarica il file di script, attende per finire l'esecuzione DOM e quindi eseguire il file di script.

Esempio
Passiamo attraverso il seguente esempio:

Nelle righe di codice sopra:

• Includere il ""Tag che si riferiscono ai file esterni separati"asincrone.js" E "differire.js"All'interno del""Tag.
• Dopodiché, creeremo "463"Pulsanti mediante codifica"pulsante click*463"E quindi premere la scheda.

Discutiamo del "asincrone"Funzionalità dell'attributo:

let asyncValue = documento.QuerySelectorAll ('Button');
console.log ('Attributo Async Conteggio dei pulsanti: $ asyncValue.lunghezza');

Nell'asincronizzazione.file js, applicare i seguenti passaggi:

• Accedi ai pulsanti creati usando "QuerySelectorAll ()" metodo.
• Dopodiché, applica il "lunghezza"Proprietà in combinazione con il"letterali modello"Per visualizzare il conteggio dei pulsanti in modo tale che lo script venga eseguito mentre la pagina continua l'analisi.

Ora, dai un'occhiata al "differire"Funzionalità dell'attributo:

Let DeferValue = Document.QuerySelectorAll ('Button');
console.log ('DEFER Attributo COUNT ATTRIBUTO: $ DeferValue.lunghezza');

Nelle righe precedenti del codice, considera i passaggi di seguito:

• Allo stesso modo, accedi ai pulsanti creati tramite "QuerySelectorAll ()" metodo.
• Allo stesso modo, ripeti la procedura discussa per restituire il conteggio dei pulsanti tramite "lunghezza" proprietà.
• In questo scenario, il file di script verrà eseguito dopo che l'analisi DOM è stata completamente completata.

Produzione

La differenza tra entrambi gli attributi dichiarati può essere analizzata con l'aiuto del conteggio generato.

Conclusione

Nel "asincrone"Attributo, lo script esegue mentre la pagina è ancora analizzante, mentre il"differire"L'attributo attende fino a quando il modello Object (DOM) del documento non viene eseguito completamente. Questo articolo ha dichiarato le differenze tra "asincrone" E "differire"Attributi in JavaScript con l'aiuto di esempi.