Herunterladen von JavaScript ohne Blockierung

Question

Der Kontext: Meine Frage bezieht sich auf die Verbesserung der Leistung beim Laden von Webseiten, und insbesondere der Effekt, den Javascript beim Laden der Seite hat (Ressourcen/Elemente unterhalb des Skripts sind vom Herunterladen/Rendern blockiert).

Dieses Problem wird normalerweise vermieden/abgeschwächt, indem die Skripte ganz unten platziert werden (z. B. kurz vor dem Tag).

Der Code, den ich betrachte, ist für Webanalyse. Wenn Sie es unten platzieren, verringert sich die Genauigkeit. und weil dieses Skript keinen Einfluss auf den Inhalt der Seite hat, dh es wird kein Teil der Seite neu geschrieben - ich möchte es in den Kopf verschieben. Wie man das macht, ohne die Seitenlade-Leistung zu ruinieren, ist die Crux.

Aus meiner Forschung, ich habe sechs Techniken (w/Unterstützung bei allen oder den meisten gängigen Browsern) gefunden Skripte zum Download, so dass sie nach unten Seite nicht Inhalt von Laden/Rendering blockieren:

(i) XHR + Eval();

(ii) XHR + injizieren;

(iii) Laden Sie das HTML-Wrapped-Skript wie in iFrame herunter;

(iv) Einstellung der async Flagge Script-Tag auf TRUE (HTML 5 nur);

(v) Einstellung der des Skript-Tags defer Attribut; und

(vi) 'Skript-DOM-Element'.

Es ist der letzte von diesen ich verstehe nicht. Das JavaScript zu implementieren, das Muster (vi) ist:

(function() { 
    var q1 = document.createElement('script'); 
    q1.src = 'http://www.my_site.com/q1.js' 
    document.documentElement.firstChild.appendChild(q1) 
})(); 

scheint einfach: und anonyme Funktion erstellt wird, dann in dem gleichen Block ausgeführt. Innerhalb dieser anonymen Funktion:

• ein Skriptelement

• sein src Element erstellt wird, auf seine Lage, dann

• das Skript Element auf das DOM

hinzugefügt wird

Aber während jede Zeile klar ist, ist es mir immer noch nicht klar wie exac Dieses Muster ermöglicht das Laden von Skripten, ohne die Elemente/Ressourcen der Down-Page vom Rendern/Laden zu blockieren?

Answer 1

Eine Anmerkung vorweg:

(iv) Einstellen der 'async' Flagge des Skript-Tag 'TRUE' (HTML 5 nur);

async ist ein "boolesches Attribut", im HTML-Sinne. Das bedeutet, dass eine der folgenden korrekt ist:

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

Und die sowohl des folgend das Skript asynchron werden machen, geladen sind aber nicht entsprechen (wegen der möglichen Verwirrung):

<script async="true" src="..."></script> 
<script async="false" src="..."></script> 

---

Jetzt auf Ihre Frage. Der Punkt ist, dass es der HTML-Parser ist, der durch das Skript blockiert wird (weil Leute dumme Sachen Sachen wie document.write("<!--"), sogar von den externen JS Akten tun und erwarten, dass es "arbeitet"). In Ihrem Fall (vi) sieht der HTML-Parser jedoch niemals das Skriptelement, weil es direkt zum DOM hinzugefügt wird. Etwas logisch, wenn ein script Element (oder eher ein <script> Start-Tag) vom HTML-Parser nicht gesehen wird, kann es das Parsen auch nicht stoppen.

Answer 2

Ich werde versuchen, alles mit einer URL zu sagen, es wird uns beide Zeit sparen.

Bitte werfen Sie einen Blick auf diese Präsentation des Autors eines Buches, das Themen wie die, die Sie erwähnen, behandelt.Ich fand die Präsentation (es gibt einen youtube auch - ich denke im Google-Kanal) sehr sehr interessant. Es erklärt viel von dem, was Sie wissen wollen.

http://www.slideshare.net/souders/sxsw-even-faster-web-sites

http://www.youtube.com/watch?v=aJGC0JSlpPE (lange Video vieler Details auf der Leistung params/Themen)

Answer 3

Ihr letztes Beispiel modifiziert den DOM-Baum und kann nur verwendet werden, nachdem der DOM-Baum abgeschlossen ist (onload). So kann der Browser die Seite bereits vollständig rendern, während Sie das js-Skript laden. Hier

ist ein Beispiel dafür, wie Firefox 2 verschiedene Versionen macht:

img http://img177.imageshack.us/img177/9302/40229406.jpg

• test.html Lasten mit Ihrer Methode oben innerhalb onload am unteren Rand der Seite.
• test2.html lädt mit einem einfachen Skript-Tag im Kopf.

Beachten Sie die rote Linie, wenn das Onload-Element ausgelöst wird.