Zunächst möchte ich über die Lade und Ausführung von JavaScript sprechen. Im Allgemeinen haben Browser zwei Hauptfunktionen für den JavaScript -Betrieb: 1) Sofort nach dem Laden, 2) blockiert die nachfolgenden Inhalte der Seite (einschließlich Seitenrendern und anderer Ressourcen Download) während der Ausführung. Wenn daher mehrere JS -Dateien eingeführt werden, werden diese JS -Dateien für den Browser seriell geladen und nacheinander ausgeführt.
Da JavaScript den DOM -Baum von HTML -Dokumenten betreiben kann, laden Browser im Allgemeinen keine CSS -Dateien parallel wie parallele Downloads herunter, da dies durch die Besonderheit von JS -Dateien verursacht wird. Wenn Ihr JavaScript das nachfolgende DOM -Element bedienen möchte, meldet der Browser im Grunde einen Fehler, dass das Objekt nicht gefunden werden kann. Denn wenn JavaScript ausgeführt wird, ist der HTML hinter dem Hintergrund blockiert und es befindet sich kein DOM -Knoten hinter dem DOM -Baum. Das Programm wird also als Fehler gemeldet.
Der traditionelle Weg
Wenn Sie also den folgenden Code in den Code schreiben:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
Grundsätzlich blockiert das <Script> -Tag im Kopf das Laden nachfolgender Ressourcen und die Erzeugung der gesamten Seite. Ich habe ein besonderes Beispiel gemacht, das Sie sich ansehen können: Beispiel 1. ANMERKUNG: Es gibt nur einen Satz in meinem Alert.js: Alert ("Hallo Welt"), was es Ihnen leichter erleichtert, zu sehen, wie JavaScript die Dinge dahinter blockiert.
Sie wissen also, warum viele Websites JavaScript am Ende der Webseite platzieren, entweder mit Ereignissen wie window.onload oder docMuemt fertig.
Da die meisten JavaScript -Code nicht auf Seiten warten müssen, laden wir Funktionen asynchron. Wie laden wir asynchron?
Dokument.Write -Methode
Sie denken also vielleicht, dass document.write () das Problem lösen kann, nicht zu blockieren. Natürlich werden Sie denken, dass nach dem Dokument. Write <Script> Tag ausgeführt werden kann, können die folgenden Dinge ausgeführt werden, was korrekt ist. Dies gilt für den JavaScript -Code im selben Skript -Tag, aber für die gesamte Seite blockiert dies immer noch. Hier ist ein Testcode:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" Sprache = "JavaScript">
Funktion loadJS (script_filename) {
document.write ('<' + 'script sprach = "javaScript" type = "text/javaScript"');
document.write ('src = "' + script_filename + '">');
document.write ('<'+'/script'+'>');
alert ("loadjs () exit ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
LoadJS (Skript);
alert ("loadjs () fertig!");
</script>
<script type = "text/javaScript" Sprache = "JavaScript">
alarm ("ein anderer Block");
</script>
Was denkst du, ist die Reihenfolge der Warnungen? Sie können es in verschiedenen Browsern versuchen. Hier ist die Testseite, die Sie schließen möchten: Beispiel 2.
Defer und asynchronisierte Eigenschaften von Skript
IE hat seit IE6 Defer -Tags unterstützt, wie zum Beispiel:
Die Codekopie lautet wie folgt:
<script defer type = "text/javaScript" src = "./ alert.js">
</script>
Für IE ermöglicht dieses Tag dem IE, JS -Dateien parallel herunterzuladen und ihre Ausführung bis zum Abschluss des gesamten DOM -Ladens (DomContent Loaded) zu halten. Multiple Defer <Script> wird auch in der Reihenfolge ausgeführt, die sie bei der Ausführung angezeigt haben. Das Wichtigste ist, dass nach dem Hinzufügen von Aufschriften zu <skripts> die Darstellung der nachfolgenden DOM nicht blockiert wird. Da dieser Schein jedoch nur für den IE verwendet wird, wird er im Allgemeinen weniger verwendet.
Unser Standard -HTML5 fügt auch ein Attribut hinzu, das JavaScript asynchron lädt: asynchronisiert. Egal welchen Wert Sie ihm zuweisen, solange es erscheint, laden Sie die JS -Datei asynchron. Die asynchronisierte Belastung hat jedoch ein ernstes Problem, dh es implementiert die "unmittelbare Ausführung unmittelbar nach dem Laden". Obwohl es das Rendern der Seite nicht blockiert, können Sie die Reihenfolge und den Zeitpunkt seiner Ausführung nicht steuern. Sie können sich dieses Beispiel ansehen, um es zu erleben.
Die Browser, die das Async -Tag unterstützen, sind: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, dh 10+, Opera unterstützt es (von hier aus), daher ist diese Methode auch nicht sehr gut. Weil nicht alle Browser es können.
Dynamisch DOM erstellen
Diese Methode ist wahrscheinlich die am häufigsten verwendete.
Die Codekopie lautet wie folgt:
Funktion loadJS (script_filename) {
var script = document.createelement ('script');
script.setAttribute ('type', 'text/javaScript');
script.setAttribute ('src', script_filename);
script.setAttribute ('id', 'coolshell_script_id');
script_id = document.getElementById ('coolshell_script_id');
if (script_id) {
document.getElementsByTagName ('head') [0] .removechild (script_id);
}
document.getElementsByTagName ('head') [0] .AppendChild (script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
LoadJS (Skript);
Diese Methode ist fast zu einer asynchronen Standardmethode geworden, um JS -Dateien zu laden. Für eine Demonstration dieser Methode finden Sie unter: Beispiel 3. Diese Methode wird auch mit JSONP -Dingen abgespielt, dh ich kann ein Hintergrundskript (z. B. PHP) für Skript -SRC angeben, und dieser PhP gibt eine JavaScript -Funktion zurück, deren Parameter eine JSON -String ist, die zurückgeführt wird, um unsere vordefinierte Javascript -Funktion aufzurufen. Sie können sich dieses Beispiel ansehen: T.JS (dieses Beispiel ist ein kleines Beispiel für einen asynchronen Ajax -Anruf, den ich zuvor auf Weibo gesammelt habe)
Laden Sie JS asynchron auf Bedarf
Das obige Beispiel der DOM -Methode löst das Problem der asynchronen Belastung von JavaScript, löst jedoch nicht das Problem, das wir zum Zeitpunkt des angegebenen Zeitpunkts ausführen sollen. Wir müssen also nur die obige DOM -Methode an ein bestimmtes Ereignis binden.
Zum Beispiel:
An Fenster gebunden.Load Ereignis - Beispiel 4
Sie müssen die Unterschiede in der Ausführung zwischen Beispiel 4 und Beispiel 3 vergleichen. In beiden Beispielen habe ich speziell ein JavaScript mit Code -Hervorhebung verwendet, um die Ausführung des Skripts mit Code -Hervorhebung und Ausführung meines Alert.js anzuzeigen. Sie werden den Unterschied kennen)
Die Codekopie lautet wie folgt:
window.load = ladejs ("http://coolshell.cn/asyncjs/alert.js")
An ein bestimmtes Ereignis gebunden - Beispiel 5
Die Codekopie lautet wie folgt:
<p style = "cursor: pointer" onclick = "loadjs ()"> klicken, um allert.js </p> zu laden
Dieses Beispiel ist sehr einfach. Nur wenn Sie auf ein DOM -Element klicken, werden unsere Alarms.js tatsächlich geladen.
Mehr
Die Bindung an ein bestimmtes Ereignis scheint jedoch ein wenig zu bestehen, da der eigentliche Download von JS nur beim Klicken durchgeführt wird, was wieder zu langsam ist. Okay, hier müssen wir unser ultimatives Problem werfen - wir möchten die JS -Datei asynchron in den lokalen Bereich des Benutzers herunterladen, aber nicht ausführen, nur wenn wir sie ausführen möchten.
Es wäre großartig, wenn wir die folgende Methode hätten:
Die Codekopie lautet wie folgt:
var script = document.createelement ("script");
script.noexecute = true;
script.src = "alert.js";
document.body.appendchild (script);
// wir können das später tun
script.execute ();
Leider ist dies nur ein schöner Traum. Heute ist unser JavaScript noch relativ primitiv, und dieser "JS -Traum" wurde noch nicht verwirklicht.
Daher können unsere Programmierer nur Hack verwenden, um dies zu tun.
Einige Programmierer verwenden einen nicht standardmäßigen Skript-Typ, um JavaScript zu zwischenstrahlen. wie:
Die Codekopie lautet wie folgt:
<script type = cache/script src = "./ alert.js"> </script>
Da "Cache/Skript", kann dieses Ding vom Browser überhaupt nicht analysiert werden, sodass der Browser Alert.js nicht als JavaScript ausführen kann, aber es muss die JS -Datei herunterladen, damit sie erledigt werden kann. Leider folgt Webkit streng den HTML -Standards - für solche unerkannten Dinge werden sie sie direkt löschen und nichts tun. Also war unser Traum wieder gebrochen.
Wir müssen es also ein bisschen mehr hacken. Genau wie N vor vielen Jahren Vorspannungsbilder gespielt hat, können wir das Objekt -Tag (oder Iframe -Tag) verwenden, sodass wir den folgenden Code haben:
Die Codekopie lautet wie folgt:
Funktion cacheJs (script_filename) {
var cache = document.createelement ('objekt');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendchild (cache);
}
Dann nennen wir diese Funktion am Ende. Bitte beachten Sie das zugehörige Beispiel: Beispiel 6
Drücken Sie Strg+Shit+I unter Chrome, wechseln Sie zur Netzwerkseite und Sie können sehen, dass Alert.js heruntergeladen wurde, es jedoch nicht ausgeführt wurde. Anschließend verwenden wir die Methode von Beispiel 5, da die Browser -Seite Cache hat, alert.js wird nicht mehr vom Server heruntergeladen. Daher kann die Ausführungsgeschwindigkeit garantiert werden.
Sie sollten mit dieser Art von Vorspann vertraut sein. Sie können auch AJAX -Methoden verwenden, z. B.:
Die Codekopie lautet wie folgt:
var xhr = new xmlhttprequest ();
xhr.open ('get', 'new.js');
xhr.send ('');
Ich werde nicht mehr sagen und hier Beispiele geben. Sie können es selbst ausprobieren.
Schließlich erwähnen wir zwei JS, einer ist ControlJs und der andere Headjs, das speziell zur Erstellung von asynchronen Lade -JavaScript -Dateien verwendet wird.
Ok, das ist der gesamte Inhalt. Ich hoffe, Sie können ein Verständnis für das Laden und Ausführen von JavaScript sowie für verwandte Technologien nach dem Lesen haben. Gleichzeitig hoffe ich auch, dass alle Front-End-Experten Ihnen Ratschläge geben!