Caricamento in modo asincrono per eliminare js & css di blocco del rendering?

Question

Ho appena trascorso molto tempo su google ... e trovo solo metà delle risposte ovunque. Sto utilizzando le informazioni sulla velocità della pagina di Google per migliorare il mio sito Web e mi dice di caricare in modo asincrono il mio javascript. Ho trovato un paio di codici, ma non hanno spiegato come caricare più di un file js E come caricare anche il css. Inoltre non ho potuto trovare da nessuna parte dove mi dice in che ordine caricarlo. Qualcuno può aiutare?

NOTA: ho provato a spostare i js al piè di pagina, ma poi il mio menu cellulare non funziona più (che utilizza il file expand.js)

file JavaScript che ho bisogno di in modo asincrono carico sono:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="js/h5.js"></script> 
    <script language="javascript" type="text/javascript" src="js/expand.js"></script> 

mio CSS:

<link rel="stylesheet" type="text/css" href="style.css"> 

Answer 1

asincrono caricamento di script può ottenere abbastanza complicato. Hai provato a utilizzare l'attributo async? Es .:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script async language="javascript" type="text/javascript" src="js/h5.js"></script> 
<script async language="javascript" type="text/javascript" src="js/expand.js"></script> 

Tuttavia, questo può causare indesiderato race conditions. Tutto ciò significa che il resto del tuo sito è non che attenderà il caricamento di questi tre file JavaScript prima di caricare altre risorse. Questo può o non può migliorare la velocità del tuo sito a seconda di ciò che è contenuto, e può produrre risultati stupefacenti in termini di gestione delle dipendenze che dovrai tenere conto nei tuoi script.

Solitamente è consigliabile dal grande G creare due piccoli file: un file CSS e un file JavaScript da includere nel tuo <head/> che contiene tutti gli stili e la logica per il contenuto above the fold (o meglio ancora: li incorpora, anche se questo aumenta le dimensioni del DOM). Source.

Answer 2

Come caricare in modo asincrono il file Javascript?
Bene per caricare file javascript è sufficiente includere attributo "asincrono" in <script> tag cioè

<script src="your path" async></script> 

Ora, questo script verrà scaricato in background mentre non causerà JS problema di rendering.
Nota: Se si sta utilizzando un plug-in jQuery, ad esempio lo zoom dell'immagine o qualsiasi altra cosa, ci vorrà un po 'di tempo per caricare, ma dopo ciò funzionerà correttamente.

Perché utilizzare la parola chiave "DEFER" con "ASYNC"?

È inoltre possibile utilizzare l'attributo defer con l'attributo async. Il tag <script> con attributo asincrono forza il download del file in background ed esegue non appena viene scaricato. ma asincrona con l'attributo defer impone il tag <script> da eseguire una volta caricato l'intero sito.

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

come caricare in modo asincrono file CSS? Se si desidera caricare il file CSS in modo asincrono, prima è necessario inserire <script> nel file head e quindi è possibile utilizzare la funzione loadCSS() per caricare il file CSS in modo asincrono.

<script> 
// https://github.com/filamentgroup/loadCSS 
!function(e){"use strict" 
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all" 
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e() 
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s} 
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this) 
</script> 

Ora è sufficiente utilizzare la funzione loadCSS.

<script> 
loadCSS("https://www.yourCSSLinkHere.com"); 
</script> 

---

In questo modo è possibile caricare il tuo CSS e JS di file in modo asincrono.

---

È possibile utilizzare HTTP/2.0 per superare problema di velocità, perché HTTP/2.0 permette il file da scaricare in parallelo, ma HTTP/1.0 non permetterà il file per essere scaricato in parallelo, in altro modo HTTP/1.0 segue la regola FIFO (First In First Out).