Laden Sie nicht blockierendes JavaScript mit HTML5 Async und Defer

Der Browser beginnt mit dem Download von Datei.js und anderen aufgeschobenen Skripten parallel, ohne die Seitenverarbeitung zu stoppen.Defer wurde in Internet Explorer Version 4.0 implementiert - vor über 12 Jahren! Seit Version 3.5 ist es auch in Firefox erhältlich. Während alle aufgeschobenen Skripte garantiert nacheinander ausgeführt werden, ist es schwierig zu bestimmen, wann dies eintreten wird. Theoretisch sollte es geschehen, nachdem das DOM kurz vor dem Domcontent -Ereignis vollständig geladen hat. In der Praxis hängt es vom Betriebssystem und dem Browser ab, ob das Skript zwischengespeichert ist und welche anderen Skripte zu diesem Zeitpunkt ausgeführt werden. Sie können nicht garantieren, dass Skripte nach Abfolge ausgeführt werden, aber sie werden zum Zeitpunkt des Fensters über das Onload -Ereignis geladen. Die Unterstützung für Async in Firefox 3.6, Opera 10.5 und dem neuesten Webkit -Build sollte daher in den nächsten Versionen von Chrome und Safari angezeigt werden. IE9 muss noch asynchronisiert werden Aber das IE -Team könnte es leicht als Alias ​​für Aufhebung hinzufügen. Sie können sowohl Async als auch verschieben, um alle Browser zu unterstützen-selbst IE4. Innerhalb weniger Monate haben wir endlich eine native, nicht blockierende JavaScript-Lademethode, die in allen Browsern funktioniert. Note: Opera's Delyded Skript ExecutionOpera bietet eine experimentelle verspätete Skript-Ausführungsfunktion, die in der Lage ist: config. Es erinnert sich, wo ein asynchronisiertes Skript auf der Seite geladen wurde. Daher kann das DOM -Dokument verwendet werden. Hoffen wir, dass Microsoft, Mozilla und Webkit die Führung von Opera folgen.

häufig gestellte Fragen (FAQs) zu nicht blockierender, asynchronisierter und verschiebern in JavaScript

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

Was ist der Unterschied zwischen Async und Aufschub in JavaScript? Das Async -Attribut lädt und führt das Skript asynchron mit dem Rest der Webseite aus. Dies bedeutet, dass das Skript ausgeführt wird, sobald es geladen wird, ohne auf das Laden des Restes der Webseite zu warten. Andererseits lädt das Defer -Attribut auch das Skript asynchron, vertieft jedoch die Ausführung des Skripts, bis der Rest der Webseite geladen wurde. Dies kann für Skripte nützlich sein, die darauf angewiesen sind, dass das DOM vollständig geladen wird, bevor sie ausgeführt werden können.

Wo soll ich meinen JavaScript -Code in ein HTML -Dokument einfügen? Traditionell werden Skripte im Kopfabschnitt des HTML -Dokuments platziert. Dies kann jedoch die Darstellung der Webseite blockieren, bis das Skript geladen und ausgeführt wird. Um dies zu vermeiden, wird häufig empfohlen, Skripte kurz vor dem Schlusskörper -Tag zu platzieren. Auf diese Weise kann das HTML -Dokument laden und rendern, bevor das Skript ausgeführt wird. Alternativ können Sie die Async- oder Defer -Attribute verwenden, um die Lade- und Ausführung von Skripten zu steuern, ohne das Rendern der Webseite zu blockieren. Wenn Sie JavaScript -Code in eine externe Datei einfügen, können Sie Ihre HTML -Datei sauberer und leichter zu lesen. Außerdem kann der Browser das Skript zwischenspeichern, wodurch die Ladeleistung für Wiederholungsbesuche verbessert werden kann. Es erfordert jedoch eine zusätzliche HTTP -Anforderung zum Laden des Skripts, das die anfängliche Ladezeit verlangsamen kann. Andererseits kann das Einlegen von JavaScript-Code direkt in die HTML-Datei die Notwendigkeit einer zusätzlichen HTTP-Anforderung beseitigen, die HTML-Datei jedoch schwieriger zu warten, insbesondere für größere Skripte. Dies wird erreicht, indem das Skript asynchron geladen wird, entweder durch Platzieren des Skripts am unteren Rand des HTML -Dokuments oder durch Verwenden der asynchronisierten oder aufschiebenden Attribute im Skript -Tag. Nicht blockierende Skripte können die Ladeleistung Ihrer Webseite verbessern, da der Browser den Rest der Webseite weiter laden und rendern kann, während das Skript geladen und ausgeführt wird. Befehl. Dies bedeutet, dass Skripte, die kleiner oder näher an der Spitze des HTML -Dokuments sind, vor anderen ausgeführt werden können. Wenn mehrere Skripte mit dem Defer -Attribut gekennzeichnet sind, lädt der Browser sie in der Reihenfolge, die sie im HTML -Dokument angezeigt werden, jedoch ihre Ausführung, bis der Rest der Webseite geladen wurde. Dies stellt sicher, dass Skripte in der richtigen Reihenfolge ausgeführt werden, auch wenn sie asynchron geladen werden.

Kann ich Async- und Defer -Attribute im selben Skript -Tag zusammen verwenden? Ihr Verhalten hängt jedoch vom Browser ab. In modernen Browsern, die beide Attribute unterstützen, hat das asynchrische Attribut Vorrang vor dem Defer -Attribut. Dies bedeutet, dass das Skript asynchron geladen und ausgeführt wird, sobald es verfügbar ist. Das Defer -Attribut wird ignoriert. In älteren Browsern, die das asynchrische Attribut nicht unterstützen, wird das Defer -Attribut stattdessen verwendet, wenn es vorhanden ist. Dies ist einer der Vorteile der Verwendung von Async oder Defer, da die Webseite das Laden und Rendern weiterhin weiterlädt und rendert, auch wenn ein Skript nicht geladen wird. Es ist jedoch wichtig, Skriptladefehler ordnungsgemäß zu behandeln, um sicherzustellen, dass Ihre Webseite korrekt ordnungsgemäß funktioniert, selbst wenn ein Skript nicht geladen wird. Dies beinhaltet das Testen, ob die asynchronisierte oder aufschiebende Eigenschaft in einem Skriptelement vorhanden ist. Wenn die Eigenschaft existiert, unterstützt der Browser das Attribut. Wenn nicht, unterstützt der Browser das Attribut nicht. Sie haben keinen Einfluss auf Inline -Skripte. Wenn Sie ein Inline-Skript asynchron laden und ausführen möchten, müssen Sie andere Techniken verwenden, z. B. dynamisch ein Skriptelement mit JavaScript. und ausgeführt. Das Async -Attribut lädt und führt Skripte aus, sobald sie verfügbar sind, ohne auf den Rest der Webseite zu laden. Das Defer -Attribut lädt auch Skripte asynchron, vertieft jedoch ihre Ausführung, bis der Rest der Webseite geladen wurde. Nicht blockierende Skripte werden geladen und ausgeführt, ohne die Darstellung der Webseite zu blockieren. Die beste Technik hängt von den spezifischen Anforderungen Ihrer Webseite und Ihrer Skripte ab.

Das obige ist der detaillierte Inhalt vonLaden Sie nicht blockierendes JavaScript mit HTML5 Async und Defer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!