Ich habe ein paar Fragen zu den Attributen async & defer für das </code> tag, die meines Wissens nur in HTML5-Browsern funktionieren.</p> <p>Eine meiner Websites hat zwei externe JavaScript-Dateien, die sich derzeit direkt über dem <code></body></code>-Tag befinden; die erste stammt von Google und die zweite ist ein lokales externes Skript.</p> <h2>Zur Seitenladegeschwindigkeit</h2> <ol> <li><p>Gibt es einen Vorteil darin, <code>async</code> zu den beiden Skripten hinzuzufügen, die sich am Ende der Seite befinden?</p> </li> <li><p>Gäbe es einen Vorteil darin, die Option <code>async</code> zu den beiden Skripten hinzuzufügen und sie oben auf der Seite im <code><head></code> zu platzieren?</p> </li> <li><p>Würde das bedeuten, dass sie während des Seitenladens heruntergeladen werden?</p> </li> <li><p>Ich gehe davon aus, dass dies Verzögerungen für HTML4-Browser verursachen würde, aber würde es die Seitenladung für HTML5-Browser beschleunigen?</p> </li> </ol> <h2>Verwendung von <code><script defer src=...</code></h2> <ol> <li>Würde das Laden der beiden Skripte im <code><head></code> mit dem Attribut <code>defer</code> den gleichen Effekt haben wie das Platzieren der Skripte vor dem <code></body></code>?</li> <li>Auch hier gehe ich davon aus, dass dies die HTML4-Browser verlangsamen würde.</li> </ol> <h2>Verwendung von <code><script async src=...</code></h2> <p>Wenn ich zwei Skripte mit <code>async</code> aktiviert habe</p> <ol> <li>Würden sie gleichzeitig heruntergeladen werden?</li> <li>Oder eines nach dem anderen mit dem Rest der Seite?</li> <li>Wird dann die Reihenfolge der Skripte zu einem Problem? Beispielsweise hängt ein Skript vom anderen ab, also wenn eines schneller heruntergeladen wird, könnte das zweite möglicherweise nicht korrekt ausgeführt werden usw.</li> </ol> <p>Sollte ich vielleicht besser alles so lassen, bis HTML5 häufiger verwendet wird?</p></x-turndown>
Möchte hier nur eine Klarstellung machen, hier passieren zwei Dinge 1. Herunterladen von Ressourcen 2. Ausführung von Ressourcen. Das Herunterladen von Ressourcen in beiden Fällen (async und defer) blockiert nicht, das bedeutet, sie blockieren nicht das Parsen von HTML, während die Ausführung im async-Modus das Parsen blockiert und im Falle von defer die Ausführung nach dem Parsen des HTML-Markups erfolgt, daher nicht blockierend in diesem Fall.
8 Stimmen
asyncist neu(ish), aberdeferist seit IE4 Teil des IE.Deferwurde erst kürzlich für andere Browser hinzugefügt, aber ältere Versionen dieser Browser bleiben oft viel weniger erhalten.5 Stimmen
Jetzt ist HTML5 sehr beliebt!
6 Stimmen
deferentspricht dem Platzieren von Skripten am Ende des HTML-Dokuments, was seit vielen Jahren üblich ist.7 Stimmen
@vsync ist nicht unbedingt wahr, der Browser wird das JS mit dem defer-Tag herunterladen, wenn es das Skript-Tag analysiert, aber die Ausführung bis kurz vor DOMContentLoaded aufschieben. Das Herunterladen erfolgt blockierungsfrei. Das Platzieren am Ende des HTML verzögert das Herunterladen und die Ausführung des JS, bis das DOM erstellt ist, aber Sie werden immer noch eine zusätzliche Verzögerung erleben, indem Sie auf den Download warten.
0 Stimmen
@BradFrost - Für mich ist das Herunterladen blockierend, im Sinne von der Verwendung von Internetbandbreite, und für diejenigen mit langsamer Verbindung halte ich es für unerlässlich, das Dokument zuerst zu laden und erst dann, wenn es gerendert wurde, mit dem Herunterladen von Javascript-Dateien zu beginnen. Dies trifft vor allem dann zu, wenn der Inhalt nicht eng mit Javascript gekoppelt ist, um alles zu rendern (wie SPA.)
2 Stimmen
@vsync Ich argumentiere lediglich, dass das Attribut "defer" nicht dasselbe ist wie das Platzieren von Skripten am unteren Ende des HTML. Wenn du es auf "defer" einstellst, wird der Browser das JavaScript im Hintergrund herunterladen, während es weiterhin den DOM konstruiert. Sobald der DOM konstruiert ist (DOMContendLoaded ausgelöst), wird der Browser das heruntergeladene JavaScript ausführen. Das meinte ich mit "nicht blockierend", es blockiert also nicht den Browser beim Erstellen des DOM. Deshalb wird es explizit als "defer" gekennzeichnet. Das Bild in einer Antwort unten erklärt es gut.
0 Stimmen
Auch ganz klar:
defersollte nicht viel blockieren, insbesondere in modernen Browsern, die zumindest damit beginnen können, DNS aufzulösen und dann Downloads zu starten. Dies erfolgt parallel nicht nur zum Parsen, sondern auch zu anderen Downloads. Dies umfasst mehrere Anfragen an denselben Server oder an verschiedene Server, insbesondere wenn auch HTTP/2 berücksichtigt wird (fähig, Anfragen automatisch und effizient über die selbe Verbindung zu multiplexen).