Come funziona esattamente <script defer = “defer”>?

Ho alcuni <script>elementi e il codice in alcuni di essi dipende dal codice in altri <script>elementi. Ho visto che l' deferattributo può tornare utile in quanto consente di posticipare i blocchi di codice durante l'esecuzione.

Per provarlo l'ho eseguito su Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

Tuttavia, avvisa 2 - 1 - 3. Perché non avvisa 1 - 2 - 3?

AGGIORNATO: 19/02/2016

Considera questa risposta obsoleta. Fare riferimento ad altre risposte su questo post per informazioni relative alla versione più recente del browser.

Fondamentalmente, il differimento dice al browser di attendere "fino a quando non è pronto" prima di eseguire il javascript in quel blocco di script. Di solito ciò avviene dopo che il DOM ha terminato il caricamento e document.readyState == 4

L'attributo defer è specifico di Internet Explorer. In Internet Explorer 8, su Windows 7 il risultato che vedo nella tua pagina di test JS Fiddle è, 1 - 2 - 3.

I risultati possono variare da browser a browser.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Contrariamente alla credenza popolare, IE segue gli standard più spesso delle persone, in realtà l'attributo "differisci" è definito nella specifica DOM di livello 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

La definizione di differimento del W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"Se impostato, questo attributo booleano fornisce un suggerimento all'agente utente che lo script non genererà alcun contenuto del documento (ad esempio, nessun" document.write "in javascript) e quindi l'agente utente può continuare ad analizzare e renderizzare."

Alcuni frammenti delle specifiche HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Gli attributi defer e async non devono essere specificati se l'attributo src non è presente.

Esistono tre modalità possibili che possono essere selezionate utilizzando questi attributi [asincrono e differisci]. Se l'attributo asincrono è presente, lo script verrà eseguito in modo asincrono, non appena sarà disponibile. Se l'attributo asincrono non è presente ma è presente l'attributo differito, lo script viene eseguito al termine dell'analisi della pagina. Se nessuno degli attributi è presente, lo script viene recuperato ed eseguito immediatamente, prima che l'agente utente continui ad analizzare la pagina.

I dettagli di elaborazione esatti per questi attributi sono, per ragioni prevalentemente storiche, un po 'non banali, che coinvolgono una serie di aspetti dell'HTML. I requisiti di implementazione sono quindi necessariamente sparsi in tutte le specifiche. Gli algoritmi di seguito (in questa sezione) descrivono il nucleo di questa elaborazione, ma questi algoritmi fanno riferimento e sono referenziati dalle regole di analisi per i tag di inizio e fine degli script in HTML, in contenuto estraneo e in XML, le regole per document.write () metodo, gestione degli script, ecc.

Se l'elemento ha un attributo src e l'elemento ha un attributo differito e l'elemento è stato contrassegnato come "inserito dal parser" e l'elemento non ha un attributo asincrono:

L'elemento deve essere aggiunto alla fine dell'elenco di script che verrà eseguito al termine dell'analisi del documento associato al documento del parser che ha creato l'elemento.

La vera risposta è: perché non puoi fidarti del differimento.

Nel concetto, differire e asincrono differiscono come segue:

async consente di scaricare lo script in background senza bloccarlo. Quindi, nel momento in cui termina il download, il rendering viene bloccato e lo script viene eseguito. Il rendering riprende quando lo script è stato eseguito.

differire fa la stessa cosa, ad eccezione delle affermazioni per garantire che gli script vengano eseguiti nell'ordine in cui sono stati specificati nella pagina e che verranno eseguiti al termine dell'analisi del documento. Pertanto, alcuni script potrebbero terminare il download, quindi sedersi e attendere gli script scaricati in seguito, ma visualizzati prima di essi.

Sfortunatamente, a causa di ciò che è veramente un combattimento tra gatti standard, la definizione del differimento varia da specifica a specifica, e anche nelle specifiche più recenti non offre una garanzia utile. Come le risposte qui e questo problema dimostrano, i browser implementano il differimento in modo diverso:

• In alcune situazioni alcuni browser hanno un bug che causa l' deferesaurimento degli script.
• Alcuni browser ritardano l' DOMContentLoadedevento fino al termine del defercaricamento degli script, altri no.
• Alcuni browser obbediscono deferad <script>elementi con codice incorporato e senza srcattributo, e altri lo ignorano.

Fortunatamente la specifica specifica almeno che l'asincrono ha la precedenza sul differimento. Quindi puoi trattare tutti gli script come asincroni e ottenere un'ampia gamma di supporto del browser in questo modo:

<script defer async src="..."></script>

Il 98% dei browser in uso in tutto il mondo e il 99% negli Stati Uniti eviteranno di bloccare con questo approccio.

(Se devi attendere fino al termine dell'analisi del documento, ascolta l'evento DOMContentLoadeddell'evento o usa la comoda .ready()funzione di jQuery . Ti consigliamo di farlo comunque per tornare indietro con grazia sui browser che non si implementano deferaffatto.)

deferpuò essere utilizzato solo nel <script>tag per l' inclusione di script esterni . Pertanto si consiglia di utilizzare i <script>tag nella <head>sezione.

Poiché l'attributo defer funziona solo con tag script con src. Trovato un modo per imitare il differimento per gli script incorporati. Usa l'evento DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Questo perché, l'evento DOMContentLoaded viene generato dopo che gli script posticipati differiti sono stati caricati completamente.

L'attributo defer è solo per script esterni (dovrebbe essere usato solo se è presente l'attributo src).

Va anche notato che potrebbero esserci problemi in IE <= 9 quando si utilizza script deferin determinate situazioni. Ulteriori informazioni su questo: https://github.com/h5bp/lazyweb-requests/issues/42

Dai un'occhiata a questo eccellente articolo Immergiti nelle oscure acque del caricamento degli script dello sviluppatore Google Jake Archibald scritto nel 2013.

Citando la sezione pertinente da quell'articolo:

Differire

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

La specifica dice : Scarica insieme, esegui nell'ordine appena prima di DOMContentLoaded. Ignora "differisci" sugli script senza "src".

IE <10 dice : Potrei eseguire 2.js a metà dell'esecuzione di 1.js. Non è divertente ??

I browser in rosso dicono : Non ho idea di cosa sia questa "differita", caricherò gli script come se non ci fossero.

Altri browser dicono : Ok, ma potrei non ignorare "differire" sugli script senza "src".

_{(Aggiungerò che le prime versioni di Firefox attivano DOMContentLoaded prima che gli deferscript finiscano di funzionare, secondo questo commento .)}

I browser moderni sembrano supportare asynccorrettamente, ma devi essere OK con gli script che non funzionano e probabilmente prima di DOMContentLoaded.

Questo attributo booleano è impostato per indicare a un browser che lo script deve essere eseguito dopo che il documento è stato analizzato. Dal momento che questa funzione non è stata ancora implementata da tutti gli altri principali browser, gli autori non dovrebbero presumere che l'esecuzione dello script verrà effettivamente rinviata. Non chiamare mai document.write () da uno script di differimento (dal momento che Gecko 1.9.2, questo farà saltare il documento). L'attributo defer non dovrebbe essere usato su script che non hanno l'attributo src. Da Gecko 1.9.2, l'attributo defer viene ignorato negli script che non hanno l'attributo src. Tuttavia, in Gecko 1.9.1 anche gli script incorporati vengono rinviati se l'attributo differito è impostato.

differire funziona con chrome, firefox, ovvero> 7 e Safari

rif: https://developer.mozilla.org/en-US/docs/HTML/Element/script

L'attributo defer è un attributo booleano.

Se presente, specifica che lo script viene eseguito al termine dell'analisi della pagina.

Nota: l'attributo defer è solo per script esterni (dovrebbe essere usato solo se è presente l'attributo src).

Nota: esistono diversi modi per eseguire uno script esterno:

Se async è presente: lo script viene eseguito in modo asincrono con il resto della pagina (lo script verrà eseguito mentre la pagina continua l'analisi) Se async non è presente e il differimento è presente: lo script viene eseguito al termine dell'analisi della pagina Se non è presente né asincrono né differisci: lo script viene recuperato ed eseguito immediatamente, prima che il browser continui ad analizzare la pagina