Normalmente, un tag script indica al browser di interrompere l'analisi dell'HTML, recuperare lo script, eseguirlo e solo successivamente continuare l'analisi dell'HTML. Questo perché il codice dello script può utilizzare document.write per l'output nel flusso di token HTML.
async and defer sono entrambi meccanismi per indicare al browser che è possibile procedere e continuare l'analisi dell'HTML in parallelo con il download del file di script e per eseguire il file di script in un secondo momento, non immediatamente.
Sono leggermente diversi, però; questo diagramma da the script section della versione WHAT-WG delle specifiche HTML è utile per immaginare le differenze:
Tutti i dettagli nelle specifiche linkato sopra, ma in breve, per gli script "classici" (il tipo siete abituati a, ma gli script dei moduli sono in arrivo):
- Sia
async e defer consentire al parsing del codice HTML per continuare senza attendere lo script per scaricare!.
defer farà attendere il browser per eseguire lo script fino al completamento dell'analisi.async fa in modo che il browser attenda fino al completamento del download dello script, il che significa che può eseguire lo script prima che l'analisi sia completa o successiva, a seconda del termine del download (e ricorda che potrebbe provenire dalla cache).- Se
async è presente e supportato dal browser, ha la precedenza su defer.
async Gli script possono essere eseguiti in qualsiasi ordine, indipendentemente dall'ordine in cui appaiono nel codice HTML.defer Gli script verranno eseguiti nell'ordine in cui appaiono nell'HTML, una volta completata l'analisi.async e defer sono ben supportati anche nei browser semi-moderni, ma non sono supportati correttamente in IE9 e versioni precedenti, vedere here e here.
Perché la bandiera defer essere suggerito per uno script che esegue le manipolazioni DOM?
due motivi:
- permette al parsing di continuare mentre lo script è stato scaricato, e
- Significa lo script non viene eseguito fino a quando l'analisi è completa.
Se non è stato utilizzato defer e hai effettuato le tue script tag non in modo ottimale, utilizzando defer aiuta lo script API si comportano correttamente lasciando la finitura del browser costruire il DOM prima che lo script cerca di manipolarlo.
Un sacco di gente ancora messo script tag nella sezione head del documento, anche se questo è di solito il posto peggiore per metterli a meno che non si utilizzadefer (o async). Nella maggior parte dei casi, il posto migliore (a meno che non si abbia un motivo per fare qualcos'altro) si trova esattamente allo fine, appena prima del tag di chiusura </body>, in modo che A) il tuo sito venga visualizzato rapidamente, senza attendere gli script; e B) Il DOM è completamente costruito prima di provare a manipolarlo. Raccomandare il defer potrebbe salvarli dal fastidio delle persone che inseriscono i tag script troppo presto nell'HTML.
fonte
2016-04-28 08:42:38
Penso che vedo. Quindi sembra che [l'articolo] (http://www.sitepoint.com/non-blocking-async-defer/) che ho letto per capire gli attributi di posticipo e asincrono sia ** completamente sbagliato **, e anche ** contraddice le specifiche **. Peccato che sia così [altamente su Google] (https://google.com/?q=javascript+defer+async). – dotancohen
@dotancohen: No, è corretto, è solo un po 'vago quando dice "... non contiene document.write o modestia di modifica DOM:". Quello che * dovrebbe * dire è qualcosa del tipo "... non contiene alcuna modifica document.write o DOM intesa per essere eseguita in linea con il parser." (dal momento che ci sono altre cose che puoi fare, non solo 'document.write', che farebbe affidamento sul fatto che il parser sia trattenuto in attesa dell'esecuzione dello script).Non avrebbe dovuto dare l'impressione ** tutte le ** modifiche del DOM erano fuori dal tavolo. –