Asynchron laden, um Render-Blocking js & CSS zu beseitigen?

Question

Ich habe gerade sehr lange gegoogelt ... und finde nur halbe Antworten überall. Ich verwende die google page speed insights, um meine Website zu verbessern, und sie fordert mich auf, mein Javascript asynchron zu laden. Ich habe ein paar Codes gefunden, aber sie haben nicht erklärt, wie man MEHR als eine js-Datei lädt UND wie man die CSS lädt. Ich konnte auch nirgends finden, wo es mir sagt, in welcher Reihenfolge es geladen werden soll. Kann jemand helfen?

HINWEIS: Ich habe versucht, die js in die Fußzeile zu bewegen, aber dann mein Handy-Menü funktioniert nicht mehr (was nutzt die expand.js Datei)

Die Javascript-Dateien I asynchron Last benötigen, sind:

<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> 

Meine CSS:

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

Answer 1

Asynchronous Laden von Skripten kann ziemlich kompliziert werden. Haben Sie versucht, das async Attribut zu verwenden? Z.B .:

<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> 

Dies kann jedoch unerwünschte race conditions verursachen. All dies bedeutet, der Rest Ihrer Website ist nicht warten auf diese drei JavaScript-Dateien vor dem Laden anderer Ressourcen zu laden. Je nachdem, was enthalten ist, kann dies die Geschwindigkeit Ihrer Website verbessern oder auch nicht, was zu verworrenen Ergebnissen hinsichtlich der Abhängigkeitsverwaltung führen kann, die Sie in Ihren Skripts berücksichtigen müssen.

Es wird normalerweise vom großen G empfohlen, zwei kleine Dateien zu erstellen: eine CSS- und eine JavaScript-Datei, die in Ihrem <head/> enthalten sein soll und die alle Stile und Logik für den above-the-fold-Inhalt enthält (oder noch besser: inline sie, obwohl dies die DOM-Größe erhöht). Source.

Answer 2

Wie asynchron laden Javascript-Datei?
Nun JavaScript-Datei müssen Sie nur um „async“ Attribut in <script> Tag heißt

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

nun dieses Skript laden wird im Hintergrund heruntergeladen werden, während es wird nicht JS Rendering-Problem verursachen.
Hinweis: Wenn Sie einige jQuery-Plugin das heißt Bild zoomen oder irgend etwas anderes verwenden, wird es eine zusätzliche längere Zeit dauern, aber nach, dass es richtig funktioniert.

Warum Schlüsselwort verwenden "-VERZÖGERUNG" mit "ASYNC"?

Sie können auch defer-Attribut zusammen mit Asynchron-Attribute. <script> Tag mit Async-Attribut erzwingt, dass die Datei im Hintergrund heruntergeladen und ausgeführt wird, sobald sie heruntergeladen wurde. async mit defer-Attribut erzwingt die Ausführung des Tags <script>, sobald die gesamte Site geladen ist.

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

Wie Asynchron CSS-Datei laden? Wenn Sie Ihre CSS-Datei zuerst asynchron laden möchten, müssen Sie <script> in Ihre head-Datei stellen und dann können Sie die Funktion loadCSS() verwenden, um Ihre CSS-Datei asynchron zu laden.

<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> 

Jetzt müssen Sie nur loadCSS Funktion verwenden.

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

---

Auf diese Weise können Sie Ihre Asynchron CSS und JS-Datei laden.

---

können Sie HTTP/2.0-Geschwindigkeit Problem zu überwinden, weil HTTP/2.0 ermöglicht die Dateien parallel heruntergeladen werden, sondern HTTP/1.0 wird nicht zulassen, dass die Dateien herunterladen parallel sein, auf andere Weise HTTP/1.0 folgt der FIFO-Regel (First In First Out).