C'è una via d'uscita: posizionare le righe Javascript alla fine del documento html (verranno quindi caricate dopo aver disegnato l'intera pagina) e solo dopo il contenuto dei blocchi verrà visualizzato nei posti giusti. È chiamato . Tutti i progetti seri oggi stanno cercando di passare alla nuova tecnologia di caricamento il più rapidamente possibile. Inoltre, è assolutamente facile.
Esistono diversi approcci. Inizierò in ordine.
script src= tipo= "testo/javascript" >
Caricamento asincrono dello script HTML5Lo standard HTML5 supporta la possibilità di caricare script in modo asincrono, il che può accelerare notevolmente il tempo complessivo di recupero della pagina. Basta aggiungere asincrono o rinviare .
< script async src= "http://www.site.ru/script.js" type= "text/javascript" >
< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >
Qual è la differenza tra gli attributi asincrono e differito?
In entrambi i casi otteniamo il caricamento asincrono degli script. L'unica differenza è il momento in cui inizia l'esecuzione dello script. Uno script con l'attributo async verrà eseguito il prima possibile dopo il caricamento completo, ma prima che venga caricato l'oggetto finestra. Se viene utilizzato l'attributo defer, lo script non violerà l'ordine della sua esecuzione rispetto ad altri script e la sua esecuzione avverrà dopo che la pagina sarà stata completamente caricata e analizzata, ma prima dell'evento DOMContentLoaded dell'oggetto documento.
Sfortunatamente, questo meccanismo attualmente non funziona in tutti i browser (soprattutto IE). Inoltre non funzionerà se sono presenti righe document.write nel file script.js.
Caricamento javascript asincrono con script GoogleCome tutti gli esperti sanno, Google presta particolare attenzione alla velocità di caricamento dei siti e abbassa quelli lenti nei risultati di ricerca. Per aiutarvi, Google ha sviluppato uno script speciale con il quale è possibile effettuare il caricamento asincrono di javascript.
Per utilizzarlo è sufficiente sostituirlo
SU
E collega il file di script extsrc.js
Risulterà così:
< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >
Sfortunatamente, anche questo metodo non funziona con i file con document.write
Miglior caricamento javascript asincrono funzionanteUn metodo universale per tutti i browser. Funziona anche con document.write
Nel punto della pagina in cui dobbiamo effettivamente visualizzare il nostro elemento, crea un blocco div vuoto:
< div id= "script_block" class = "script_block" >
Alla fine della pagina, prima di inserire uno script per il caricamento asincrono dei file:
< div id= "script_ad" class = "script_ad" style= "display:none;" >Ecco qualsiasi file o script che deve essere caricato.< script type= "text/javascript" >// spostalo nel documento con la posizione di visualizzazione effettiva. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) ) ; // mostra il documento. getElementById("script_ad" ) . stile. visualizzazione = "blocco";
Nelle versioni più vecchie di IE (6 e precedenti), il caricamento asincrono purtroppo non funziona, ma praticamente non esistono più tali utenti. Tutti gli altri browser e servizi utilizzano con successo il moderno caricamento accelerato delle pagine web.
Gli script sincroni sono cattivi, costringono il browser a bloccare la costruzione dell'albero DOM: prima devi ricevere lo script, eseguirlo e solo dopo continuare a elaborare il resto della pagina. Questa ovviamente non è una novità per te, ed è il motivo per cui noi come evangelisti abbiamo promosso l'uso dello scripting asincrono. Ecco un semplice esempio:
var script = document .createElement("script" ); script.src = "http://somehost.com/awesome-widget.js"; document .getElementsByTagName("head" ).appendChild(script);Qual è la differenza? Nella versione “cattiva”, blocchiamo la costruzione dell'albero DOM, aspettiamo che lo script venga caricato ed eseguito e solo allora continuiamo a elaborare il resto del documento. Nel secondo esempio, iniziamo immediatamente a eseguire uno script che crea un elemento di script che punta a una risorsa esterna, lo aggiunge al documento e continua l'elaborazione del DOM. La differenza è sottile, ma molto importante: gli script creati dinamicamente non sono bloccanti.
Quindi è fantastico, vero? Gli script creati dinamicamente sono una cosa! Non così in fretta.
Il JavaScript in linea presenta un piccolo ma importante (e spesso trascurato) errore: CSSOM lo blocca prima dell'esecuzione. Perché? Il browser non sa cosa intende fare lo script e poiché JavaScript può manipolare le proprietà CSS, si blocca e attende mentre il CSS viene analizzato e il CSSOM viene creato. È meglio vedere una volta che ascoltare cento volte, considera il seguente esempio:
Aspetta un secondo, cosa sta succedendo? Entrambi gli script verranno precaricati ed eseguiti circa 2,7 secondi dopo il caricamento della pagina. Tieni presente che gli script verranno comunque eseguiti solo dopo che il CSS sarà disponibile (~2,7 secondi), ma poiché gli script sono già caricati quando il CSSOM diventa disponibile, possiamo eseguirli immediatamente, risparmiando più di un secondo di tempo di elaborazione. Abbiamo sbagliato tutto?
Prima di rispondere a questa domanda, diamo un'occhiata a un altro esempio, questa volta con l'attributo "async":
Se l'attributo async è presente, lo script verrà eseguito in modo asincrono non appena sarà disponibile. Se l'attributo manca, ... lo script viene caricato ed eseguito immediatamente, prima che continui l'ulteriore analisi del documento.
L'attributo async sul tag script implementa due proprietà importanti: dice al browser di non bloccare la costruzione del DOM e di non bloccare l'esecuzione dello script prima della costruzione del CSSOM. Di conseguenza, gli script vengono eseguiti immediatamente dopo il caricamento (~1,6 secondi), senza attendere il CSSOM. Un breve elenco di risultati:
Allora perché abbiamo comunque suggerito di utilizzare un modello che utilizzi script generati dinamicamente?
Articolo originale: "script asincroni" inseriti da script considerati dannosi Articolo corretto da: visitingFM, zenwalker, FMRobotL'elemento HTML viene utilizzato per incorporare o fare riferimento al codice eseguibile; questo viene generalmente utilizzato per incorporare o fare riferimento al codice JavaScript. L'elemento può essere utilizzato anche con altri linguaggi, come il linguaggio di programmazione shader GLSL di WebGL.
| Contenuto di metadati, contenuto di flusso, contenuto di frasi. |
| Script dinamico come testo/javascript . |
| Nessuno, sia il tag iniziale che quello finale sono obbligatori. |
| Qualsiasi elemento che accetta contenuto di metadati o qualsiasi elemento che accetta contenuto di frasi. |
| Nessuno |
| ElementoScriptHTML |
Per gli script classici, se è presente l'attributo async, lo script classico verrà recuperato parallelamente all'analisi e valutato non appena sarà disponibile.
crossorigin Gli elementi di script normali trasmettono informazioni minime a window.onerror per gli script che non superano i controlli CORS standard. Per consentire la registrazione degli errori per i siti che utilizzano un dominio separato per i contenuti multimediali statici, utilizza questo attributo. Vedi Attributi delle impostazioni CORS per una spiegazione più descrittiva dei suoi argomenti validi. differireQuesto attributo booleano è impostato per indicare a un browser che lo script deve essere eseguito dopo che il documento è stato analizzato, ma prima di attivare DOMContentLoaded .
Gli script con l'attributo defer impediranno l'attivazione dell'evento DOMContentLoaded fino al caricamento dello script e al termine della valutazione.
Questo attributo non deve essere utilizzato se l'attributo src è assente (ad esempio per gli script inline), in questo caso non avrebbe alcun effetto.
Esempi Utilizzo di baseQuesti esempi mostrano come importare uno script (esterno) utilizzando l'elemento.
E gli esempi seguenti mostrano come inserire uno script (in linea) all'interno dell'elemento.
alert("Ciao mondo!");
Ripiego del moduloI browser che supportano il valore del modulo per l'attributo type ignorano qualsiasi script con un attributo nomodule. Ciò consente di utilizzare gli script dei moduli fornendo allo stesso tempo script di fallback contrassegnati da nomodule per i browser che non supportano.
Specifiche
| Standard di vita HTML La definizione di "" in quella specifica. |
Standard di vita | Rimosso l'attributo charset |
| HTML5 La definizione di "" in quella specifica. |
Raccomandazione | |
| Specifica HTML 4.01 La definizione di "" in quella specifica. |
Raccomandazione |
La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta https://github.com/mdn/browser-compat-data e inviaci una richiesta pull.
Aggiorna i dati di compatibilità su GitHub
| Desktop-Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Visualizzazione web Android Chrome per Android Firefox per Android Opera per Android Safari su iOS Samsung Internet | |||||||||||
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 Appunti Pieno supporto 1Appunti Appunti A partire da Firefox 4, l'inserimento di elementi creati chiamando document.createElement("script") non impone più l'esecuzione nell'ordine di inserimento. Questa modifica consente a Firefox di rispettare correttamente le specifiche. Per fare in modo che gli script esterni inseriti nello script vengano eseguiti nel loro ordine di inserimento, impostare .async=false su di essi. | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | ||||||
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
| Chrome Supporto completo 30 | Bordo Supporto completo ≤18 | Supporto completo per Firefox 13 | IE Nessun supporto No | Opera Supporto completo 12 | Safari Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti L'attributo crossorigin è stato implementato in WebKit nel bug 81438 di WebKit. | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 14 | OperaAndroid? | Safari iOS? | Samsung Internet Android Supporto completo Sì |
| Supporto completo per Chrome Sì Appunti Pieno supporto SìAppunti Appunti Numero di Chromium n. 611136, Numero di Chromium n. 874749 | Supporto completo Edge 12 | Supporto completo per Firefox 3.5 Appunti Pieno supporto 3.5Appunti Appunti A partire da Firefox 3.6, l'attributo defer viene ignorato sugli script che non hanno l'attributo src. Tuttavia, in Firefox 3.5 anche gli script inline vengono rinviati se è impostato l'attributo defer. | IE Supporto completo 10 Appunti Pieno supporto 10Appunti Appunti Nelle versioni precedenti a Internet Explorer 10, veniva implementato il differimento tramite una specifica proprietaria. Dalla versione 10 è conforme alle specifiche W3C. | Opera Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti Numero di Chromium n. 611136, Numero di Chromium n. 874749 | Safari Supporto completo Sì | WebView Android Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti WebView non rinvia gli script con l'attributo defer quando la pagina viene servita come XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Chrome Android Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti Chrome non rinvia gli script con l'attributo defer quando la pagina viene pubblicata come XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti Opera non rinvia gli script con l'attributo defer quando la pagina viene pubblicata come XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì Appunti Pieno supporto SìAppunti Appunti Samsung Internet non rinvia gli script con l'attributo defer quando la pagina viene pubblicata come XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 |
| Chrome Supporto completo 45 | Edge Supporto parziale 17 | Supporto completo per Firefox 43 | IE Nessun supporto No | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo 45 | Chrome Android Supporto completo 45 | Firefox Android Supporto completo 43 | OperaAndroid? | Safari iOS Nessun supporto No | Samsung Internet Android Supporto completo 5.0 |
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
| Chrome Supporto completo 61 | Supporto completo Edge 16 | Firefox Supporto completo 60 Supporto completo 60 Nessun supporto 55 - 60 Disabilitato Disabilitato | IE Nessun supporto No | Opera Supporto completo 48 | Safari Supporto completo 11 | Firefox Android Supporto completo 60 Supporto completo 60 Nessun supporto 55 - 60 Disabilitato Disabilitato Dalla versione 55 fino alla versione 60 (esclusiva): questa funzionalità è dietro la preferenza dom.moduleScripts.enabled (deve essere impostata su true). Per modificare le preferenze in Firefox, visitare about:config. | Safari iOS Supporto completo 11 | ||||
| Chrome Supporto completo 70 | Bordo Supporto completo ≤79 | Firefox Supporto completo 65 | IE Nessun supporto No | Opera Supporto completo Sì | Safari Nessun supporto No | WebView Android Supporto completo 70 | Chrome Android Supporto completo 70 | Firefox Android Supporto completo 65 | OperaAndroid? | Safari iOS Nessun supporto No | Samsung Internet Android Supporto completo 10.0 |
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
| Supporto completo per Chrome 1 | Supporto completo Edge 12 | Supporto completo per Firefox 1 | IE Supporto completo Sì | Opera Supporto completo Sì | Safari Supporto completo Sì | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completo 4 | Opera Android Supporto completo Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
| Chrome Supporto completo 61 | Supporto completo Edge 16 | Firefox Supporto completo 60 Supporto completo 60 Nessun supporto 54 - 60 Disabilitato Disabilitato | IE Nessun supporto No | Opera Supporto completo 48 | Safari Supporto completo 10.1 | WebView Android Supporto completo 61 | Chrome Android Supporto completo 61 | Firefox Android Supporto completo 60 Supporto completo 60 Nessun supporto 54 - 60 Disabilitato Disabilitato Dalla versione 54 fino alla versione 60 (esclusiva): questa funzionalità è dietro la preferenza dom.moduleScripts.enabled (deve essere impostata su true). Per modificare le preferenze in Firefox, visitare about:config. | Opera Android Supporto completo 45 | Safari iOS Pieno supporto 10.3 | Samsung Internet Android Supporto completo 8.0 |
| Cromo Nessun supporto No | Bordo Nessun supporto No | Firefox Nessun supporto? -59 | IE Nessun supporto No | Opera Nessun supporto No | Safari Nessun supporto No | WebView Android Nessun supporto No | Chrome Android Nessun supporto No | Firefox Android Nessun supporto? -59 | Opera Android Nessun supporto No | Safari iOS Nessun supporto No | Samsung Internet Android Nessun supporto No |
Nei browser più vecchi che non supportano l'attributo async, gli script inseriti dal parser bloccano il parser; gli script inseriti da script vengono eseguiti in modo asincrono in IE e WebKit, ma in modo sincrono in Opera e Firefox precedente alla 4. In Firefox 4, la proprietà DOM asincrona è predefinita su true per gli script creati da script, quindi il comportamento predefinito corrisponde al comportamento di IE e WebKit.
Per richiedere l'esecuzione degli script esterni inseriti nello script nell'ordine di inserimento nei browser in cui document.createElement("script").async restituisce true (come Firefox 4), impostare async="false" sugli script che si desidera mantenere ordine.
Non chiamare mai document.write() da uno script asincrono. In Firefox 3.6, la chiamata a document.write() ha un effetto imprevedibile. In Firefox 4, la chiamata a document.write() da uno script asincrono non ha alcun effetto (a parte stampare un avviso sulla console degli errori).
Asincrono e differito: strategie di caricamento JavaScript
JavaScript è parte integrante di qualsiasi applicazione web moderna e le strategie che decidiamo di utilizzare per il caricamento influiscono direttamente sulle prestazioni di quella stessa applicazione. In questo articolo cercheremo di comprendere le differenze importanti tra ciascun approccio, i pro e i contro insieme alle implicazioni sulle prestazioni e come ottimizzare l'interazione della pagina e il tempo di caricamento.
Per dimostrarlo, creerò un sito Web composto dalle seguenti dipendenze esterne. Presta particolare attenzione alle dimensioni appropriate dei file, poiché i tempi di download dei file sono direttamente proporzionali a questa.
- HTML - pagina ~ 1 MB. Contiene il markup/contenuto effettivo per mostrare alcuni output dinamici da JavaScript.
- Immagine - immagine1.png ~ 5 MB
- JavaScript - file1.JS ~3MB è il core (file principale) di javascript e dipende dall'analisi HTML. È necessario per mostrare alcuni contenuti dinamici o montare un componente react/angular sulla pagina.
- JavaScript - file2.js ~460B è un piccolo file JavaScript indipendente che interagisce con il dom.
- JavaScript - file3.js ~ 1,5 MB - Questo è un file js secondario e dipende da file1.js per eseguire un codice con priorità inferiore. Questo codice non è immediatamente richiesto per il rendering della pagina e l'interazione dell'utente; mostra le icone dei social media, i commenti, la guida in linea, l'avvio di alcune attività di analisi, ecc.
Approccio-1 [script nella sezione principale]
Nel primo caso, caricheremo tutti i tag degli script nella sezione head del nostro HTML. Di seguito è riportato uno screenshot di un'analisi di una scheda della rete Chrome, pronta per l'interazione con l'utente.
Professionisti:
La sequenza di esecuzione del codice dei vari file JS verrà preservata nell'ordine in cui i file sono stati inclusi nell'HTML. Nell'esempio corrente, anche se file2 e file3 fossero caricati prima del file1, l'ordine di esecuzione sarà corretto.
Aspetti negativi:
In questo scenario, l'analisi HTML verrà sospesa finché tutti e 3 gli script nella sezione head non saranno stati caricati, analizzati ed eseguiti. All'utente verrà mostrata una schermata bianca vuota anche se il file HTML è già stato scaricato [ma non analizzato]. Questo non è certamente positivo per l'usabilità.
Nessuno degli script sopra indicati sarà in grado di accedere/manipolare la pagina HTML poiché il DOM non è ancora pronto. Una possibile soluzione per gestire questo problema è ascoltare l'evento DOMContentLoaded e successivamente eseguire il codice. L'evento DOMContentLoaded viene attivato quando il documento HTML di origine è stato completamente caricato e analizzato, senza attendere il completamento del caricamento dei fogli di stile e delle immagini.
Approccio-2 [script alla fine]
Per superare i 2 problemi che affrontiamo nel primo approccio, carichiamo tutti e 3 gli script nella parte inferiore del tag body.
Pro: l'HTML viene analizzato prima che gli script vengano caricati, quindi l'utente sarà in grado di vedere subito il contenuto effettivo invece di attendere gli script.
Poiché tutti gli script vengono eseguiti dopo l'analisi HTML, possono tutti accedere al DOM per qualsiasi manipolazione. La sequenza di esecuzione dello script viene preservata.
Aspetti negativi:
Non vi è alcun miglioramento delle prestazioni in quanto tale.
Approccio-3 [Utilizzo dell'attributo Async]
HTML5 ha introdotto l'attributo script asincrono, che aiuta a caricare file di script rilevanti in parallelo su un altro thread senza influenzare l'analisi HTML.
Tuttavia, lo script corrispondente verrà analizzato ed eseguito non appena termina il caricamento, indipendentemente dal fatto che l'analisi HTML sia completa o meno, e avrà un riferimento all'elemento DOM fino a quel punto specifico.
Qui puoi vedere chiaramente che file2.js è stato caricato prima del file HTML. Tuttavia, mentre il browser carica il file2, non ha interrotto l'analisi dell'HTML e per questo motivo, al momento dell'esecuzione, ha un collegamento al segnaposto html per introdurre contenuto dinamico.
Pro: poiché gli script vengono caricati su un thread diverso, l'analisi HTML non verrà sospesa e l'utente sarà in grado di vedere il contenuto immediato invece di uno schermo bianco vuoto. Il principale miglioramento delle prestazioni, ovvero il tempo di DOMContentLoaded, è diminuito da 47,68 secondi a soli 21,12 secondi ed è aumentato di circa il 55%.
Aspetti negativi:
La sequenza di esecuzione JS non viene preservata. Viene eseguito nell'ordine di caricamento appropriato, anziché nella sequenza di script inclusa nell'HTML. Supporto browser: non supportato sui browser Web meno recenti, ad esempio IE 9 e versioni precedenti.
Cosa succede se il JS viene caricato prima che l'elemento DOM sia accessibile? Verrà generato un errore.
Nota: posizionare gli script con l'attributo async nella parte inferiore della sezione del corpo sarà inutile ed equivalente all'approccio-2.
Approccio-4 [Utilizzo dell'attributo Differimento]
L'attributo Defer forzerà l'esecuzione dello script solo dopo il completamento dell'analisi HTML. Un punto molto importante da considerare qui è che Chrome non supporta ancora il differimento e non ha alcun effetto sulla durata di DOMContentLoaded. Tuttavia, esegue gli script alla fine dell'analisi HTML.
Professionisti:
La sequenza di importazione dello script viene mantenuta. Pertanto file3.js viene eseguito solo dopo che il file1 ha terminato il caricamento e l'esecuzione, anche se file3 è stato caricato in precedenza.
Supporto del browser: ha un supporto del browser migliore rispetto all'attributo async, ovvero è parzialmente supportato in IE v6-9
Gli script possono accedere al DOM perché viene eseguito solo dopo che l'HTML completo è stato analizzato.
Aspetti negativi:
Inizialmente pensavo che il differimento sarebbe stata una scelta migliore rispetto all'asincrono, ma in seguito ho scoperto che Chrome non lo supporta ancora [versione 71.0.3578.98] e non ha alcun effetto sulla durata di DOMContentLoaded.
Tuttavia, funziona come previsto in Firefox con un significativo miglioramento delle prestazioni.
conclusioni
È preferibile inserire i tag script nella sezione head con l'attributo async per librerie di terze parti che dipendono da Google Analytics, Google reCAPTCHA o qualsiasi altra cosa che non richieda l'accesso al DOM, poiché gli script corrispondenti vengono caricati in parallelo ma eseguiti immediatamente.
Utilizza il differimento per tutti gli altri script caricati nella sezione head poiché anch'essi verranno caricati in parallelo ma verranno eseguiti solo una volta completata l'analisi HTML e il DOM è pronto per essere accessibile/manipolato.
Puoi anche utilizzare la combinazione di listener DOMContentLoaded all'interno di script asincroni per eseguire la funzionalità in un secondo momento. Lasciate le vostre opinioni e conclusioni nei commenti e sarò felice di discuterne con voi.
L'autore di questo materiale sono io, Yuri Pakholkov. Fornisco servizi di scrittura di programmi in Java, C++, C# (e anche consulenza sugli stessi) e creazione di siti web. Lavoro con siti su CMS OpenCart, WordPress, ModX e siti autoprodotti. Inoltre lavoro direttamente con JavaScript, PHP, CSS, HTML, ovvero posso migliorare il tuo sito web o aiutarti con la programmazione web.
Gli script plug-in (JavaScript) bloccano il caricamento del codice HTML. Quando il browser (parser) raggiunge il tag, smette di caricare il contenuto del file ed esegue il suo codice, e solo allora continua ad analizzare l'HTML.
Questo comportamento può rallentare il rendering HTML quando su una pagina sono caricati molti file JavaScript. Spesso il codice in questi file non è necessario per visualizzare l'HTML della pagina. Questo è il motivo per cui si consiglia di includere gli script alla fine della pagina. Tuttavia, questa raccomandazione non può essere sempre seguita e in questi casi esistono altri modi per evitare di bloccare la riproduzione dell'HTML.
L'elemento ha due attributi, async e defer, che possono darci un maggiore controllo su come e quando il file viene scaricato ed eseguito.
Esecuzione normale... ... .... attributo asincrono
differire l'attributo 
Dove e cosa usare? Dipende dalla situazione. Consideriamo diverse domande su questo argomento.
Dove si trova l'elemento?Se il file JavaScript si trova immediatamente prima del tag di chiusura, non ha senso utilizzare async o defer poiché a questo punto il parser ha già analizzato tutto il codice HTML.
Lo script è autonomo?Per i file (script) che non sono necessari per il funzionamento di altri script e che non hanno dipendenze da altri script, l'attributo async è particolarmente utile. Poiché in questo caso non è importante il punto in cui viene eseguito lo script, il caricamento asincrono è l'opzione più adatta.
Ho bisogno di un DOM completamente caricato affinché lo script funzioni?Se ciò è necessario, l'utilizzo di async è appropriato solo se lo script è progettato per il caricamento asincrono, ad es. attende l'evento finché il DOM non viene caricato e solo allora inizia a funzionare.
Oppure puoi utilizzare l'attributo differisci. In questo caso, puoi inserire la chiamata allo script ovunque nell'HTML.
La sceneggiatura è piccola?Se lo script è relativamente piccolo e dipende da esso o dipende da altri script, può essere incorporato direttamente nell'HTML (connessione in linea).
Supporto del browser 97% Aggiunta di attributi di differimento o asincrono in WordPressNon esistono metodi standard per farlo, quindi utilizzeremo l'hook script_loader_tag:
Add_action("wp_enqueue_scripts", "my_scripts_method"); function my_scripts_method())( // collega lo script wp_enqueue_script("my-script", get_template_directory_uri() . "/js/my-script.js"); // Aggiunge l'attributo defer allo script con id `my-script ` add_filter(" script_loader_tag", "change_my_script", 10, 3); funzione change_my_script($tag, $handle, $src)( if("my-script" === $handle)( // return str_replace(" src ", " async src", $tag); return str_replace(" src", " defer src", $tag); ) return $tag; ) )
