Untersuchung von async, defer und dynamischen Skripttypen.
Heutzutage können Skripte schwerer sein als HTML und ihre Downloadgröße ist größer, und auch die Verarbeitungszeit ist länger.
Aber es kann einige wichtige Probleme geben, wie zum Beispiel:
- Skripte können die DOM-Elemente unter ihnen nicht sehen
- Wenn ein umfangreiches Skript oben auf der Seite steht, „blockiert es die Seite“. Die Benutzer können den Inhalt der Seite erst sehen, wenn es heruntergeladen und ausgeführt wird.
Dieses Problem kann dadurch gelöst werden, dass das Skript am Ende (nach HTML) platziert wird, aber diese Lösung zwingt das Skript, nach dem Laden von HTML zu laden. Bei langen HTML-Dokumenten kann dies zu einer spürbaren Verzögerung führen, wenn die Nutzer langsames Internet haben.
Glücklicherweise gibt es zwei <script>-Attribute, die das Problem für uns lösen: defer und async.
Mit dem Attribut „defer“ lädt der Browser das Skript im „Hintergrund“ und führt es aus, wenn es geladen wird.
Der „defer“-Modus verhindert also, dass die Seite blockiert wird, und Skripte mit „defer“ werden immer ausgeführt, wenn das DOM bereit ist, aber vor dem DOMContentLoaded-Ereignis.
Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes fertig geladen sind.
Aufgeschobene Skripte behalten ihre relative Reihenfolge, genau wie normale Skripte. Wenn wir also zuerst ein langes Skript haben und dann ein kleineres, dann wartet das letztere.
Allerdings wird das defer-Attribut ignoriert, wenn das <script>-Tag kein src hat.
Async
Das async-Attribut bedeutet, dass es dem Skript hilft, im ‚unabhängigen‘ Modus zu laden.
Der Browser lädt Seiten, ohne auf das Laden von asynchronen Skripten zu warten. DOMContentLoaded und async-Skripte warten nicht aufeinander („load-first“-Reihenfolge).
Andere Skripte warten nicht auf async-Skripte, und async-Skripte warten nicht auf sie. Der asynchrone Modus (wie der aufgeschobene Modus) blockiert die Seite nicht.
Asynchrone Skripte sind großartig, wenn wir ein unabhängiges Skript eines Drittanbieters in die Seite integrieren: Zähler, Anzeigen, Analysetools und so weiter, da sie nicht von unseren Skripten abhängen und unsere Skripte nicht auf sie warten sollten.
Dynamisch
Wir können ein Skript auch dynamisch mit JavaScript einfügen:
Das Skript beginnt zu laden, sobald es an das Dokument angehängt wird und verhält sich standardmäßig als „async“-Skript.
Das bedeutet:
- Sie warten auf nichts, nichts wartet auf sie.
- Das Skript, das zuerst geladen wird, wird zuerst ausgeführt („load-first“ Reihenfolge).
Aber wir können den asynchronen Modus für dynamische Skripte ausschalten, indem wir script.async = false setzen, bevor wir es an html anhängen.
Zusammenfassung
Beide async und defer haben eines gemeinsam: das Herunterladen solcher Skripte blockiert nicht das Rendern der Seite. So kann der Benutzer den Seiteninhalt lesen und sich sofort mit der Seite vertraut machen.
Danke fürs Lesen. Ich hoffe, es hat Ihnen gefallen 😎