Attributo JavaScript Defer

Se hai mai cercato lo sviluppo del web o la progettazione di siti Web, è probabile che tu abbia probabilmente sentito parlare di HTML. Bene, HTML sta per "Hyper Text Markup Language". HTML è usato in combinazione con CSS per sviluppare pagine Web attraenti e reattive. JavaScript è un linguaggio di programmazione che consente alle nostre pagine Web e alle applicazioni Web di pensare e agire e rendere interattive le nostre applicazioni web. L'intero documento HTML è prima scansionato dal browser per CSS, JavaScript o qualsiasi altro materiale di riferimento come un'immagine e questo processo è chiamato analisi HTML. Il browser Web richiede quindi ciascuno dei file di risorse dal server se le risorse si trovano nell'HTML. Una volta che il browser Web ha tutte le risorse necessarie, inizia a costruire la pagina.

JavaScript può essere referenziato dal sceneggiatura Il tag di HTML e JavaScript è chiamato parser Blocco della risorsa Perché l'analisi HTML è bloccata da JavaScript. Per risolvere questo problema il sceneggiatura Tag di HTML ci offre asincroni e differire attributi che quindi ci consentono di avere un maggiore controllo su come e quando vengono recuperati ed eseguiti file esterni. In questo post, esploreremo ciò che è l'attributo DEFER JavaScript e come possiamo usare l'attributo Defer.

Esecuzione normale

Diamo un'occhiata all'impatto di ciò che accade quando l'attributo Defer non è lì. I file JavaScript, per impostazione predefinita, metteranno in pausa l'analisi del testo HTML in modo che possano essere recuperati (se non in linea) ed esegui.

Diciamo che abbiamo un tag di script da qualche parte nel mezzo di una pagina HTML e c'è il codice HTML sopra e sotto il sceneggiatura etichetta:

Il parser HTML scansionerà questa pagina e quando raggiungerà il tag script metterà in pausa l'analisi HTML e prenderà il JavaScript codice.js file nel tag script e quindi eseguire quel file. Una volta completate l'esecuzione e il recupero del file JavaScript, solo allora l'analisi HTML continua di nuovo. Questo processo ritarda il rendering di HTML e quindi rallenta la nostra pagina web prendendo un po 'di tempo per caricare completamente la pagina web.

Qual è l'attributo Defer?

La proprietà Defer può avere solo un valore reale o un valore falso, possiamo concludere che si tratta di un attributo booleano. È un attributo che viene utilizzato solo per script esterni. Se viene utilizzata questa proprietà, definisce che il browser non dovrebbe attendere che lo script carichi. Significa, in alcuni casi, gli script esterni possono richiedere molto tempo per caricare, questa proprietà dice semplicemente di caricare il documento prima di caricare nello script. In parole semplici, l'attributo Defer non aspetta il sceneggiatura Tag e l'elaborazione di HTML continuano così facendo aumentare le prestazioni della nostra pagina web. La sintassi per l'attributo Defer è:

Dovrebbe essere notato che l'attributo Defer può essere applicato solo a fogli/script esterni quando il src L'attributo è presente nel tag script. Va anche notato che l'attributo di differimento non può essere applicato al codice in linea.

L'attributo Defer è simile al processo asincrono, cioè puoi passare a un'altra attività anche quando la prima attività non è completata.

Esempio

Stiamo usando un foglio JavaScript esterno con il nome di codice.JS:

Prima della sceneggiatura

Dopo lo script: eseguirà immediatamente

Abbiamo iniziato a P tagg e poi un tag script che fa riferimento al codice.js file e poi di nuovo a P etichetta.

Nel codice.js file, semplicemente console.tronco d'albero Ciao mondo!:

console.registro ("Hello World!");

Vedremo il seguente output:

Supportabilità del browser

I numeri indicati nella tabella indicano quale versione del browser è stato il primo ad implementare completamente l'attributo.

Attributo	Mozilla Firefox	Microsoft Edge	Google Chrome	musica lirica	Safari
differire	3.5	10.0	8.0	15.0	5.0

Conclusione

L'esecuzione normale di HTML viene bloccata quando esiste un tag script. Il tag script prenderà un file o un collegamento esterno e quindi lo esegue bloccando quindi l'analisi normale di HTML. L'attributo Defer è la soluzione come attributo Defer ci aiuterà sceneggiatura etichetta. In questo post, è stato discusso l'attributo Defer in JavaScript insieme a un esempio e la sostegno al browser.