So sieht es aus, wenn ein Browser eine Website lädt, die eine <script> Schildchen an:
- Holen Sie die HTML-Seite (z. B. index.html )
- Mit dem Parsen des HTML beginnen
- Der Parser stößt auf eine
<script> Tag, das auf eine externe Skriptdatei verweist.
- Der Browser fordert die Skriptdatei an. In der Zwischenzeit blockiert der Parser den anderen HTML-Code auf Ihrer Seite und hält ihn an.
- Nach einiger Zeit wird das Skript heruntergeladen und anschließend ausgeführt.
- Der Parser fährt mit dem Parsen des restlichen HTML-Dokuments fort.
Schritt Nr. 4 verursacht eine schlechte Benutzererfahrung. Ihre Website wird im Grunde nicht mehr geladen, bis Sie alle Skripte heruntergeladen haben. Wenn es etwas gibt, das Nutzer hassen, dann ist es das Warten auf das Laden einer Website.
Wie kommt es überhaupt dazu?
Jedes Skript kann sein eigenes HTML über document.write() oder andere DOM-Manipulationen. Dies bedeutet, dass der Parser warten muss, bis das Skript heruntergeladen und ausgeführt wurde, bevor er den Rest des Dokuments sicher parsen kann. Schließlich ist das Skript könnte sein eigenes HTML in das Dokument eingefügt hat.
Die meisten JavaScript-Entwickler manipulieren jedoch nicht mehr das DOM während das Dokument wird geladen. Stattdessen warten sie, bis das Dokument geladen ist, bevor sie es ändern. Zum Beispiel:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
JavaScript:
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Weil Ihr Browser nicht weiß mein-skript.js das Dokument erst dann ändert, wenn es heruntergeladen und ausgeführt wurde, stellt der Parser das Parsen ein.
Antiquierte Empfehlung
Der alte Ansatz, dieses Problem zu lösen, bestand darin, die <script> Tags am unteren Rand Ihrer <body> denn so wird sichergestellt, dass der Parser nicht bis zum Ende blockiert wird.
Dieser Ansatz hat sein eigenes Problem: Der Browser kann mit dem Herunterladen der Skripte erst beginnen, wenn das gesamte Dokument geparst ist. Bei größeren Websites mit umfangreichen Skripten und Stylesheets ist es für die Leistung sehr wichtig, das Skript so schnell wie möglich herunterladen zu können. Wenn Ihre Website nicht innerhalb von 2 Sekunden geladen ist, werden die Besucher auf eine andere Website wechseln.
Bei einer optimalen Lösung würde der Browser so schnell wie möglich mit dem Herunterladen Ihrer Skripte beginnen, während er gleichzeitig den Rest Ihres Dokuments parst.
Der moderne Ansatz
Heute unterstützen die Browser die async y defer Attribute für Skripte. Diese Attribute teilen dem Browser mit, dass das Parsing sicher ist, während die Skripte heruntergeladen werden.
asynchron
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
Skripte mit dem Attribut async werden asynchron ausgeführt. Das bedeutet, dass das Skript ausgeführt wird, sobald es heruntergeladen wurde, ohne dass der Browser in der Zwischenzeit blockiert wird. Dies bedeutet, dass es möglich ist, dass Skript 2 vor Skript 1 heruntergeladen und ausgeführt wird.
Selon http://caniuse.com/#feat=script-async 97,78 % aller Browser unterstützen dies.
aufschieben.
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
Skripte mit dem Attribut "aufschieben" werden in der Reihenfolge ausgeführt (d. h. erst Skript 1, dann Skript 2). Auch dadurch wird der Browser nicht blockiert.
Im Gegensatz zu asynchronen Skripten werden aufgeschobene Skripte erst dann ausgeführt, wenn das gesamte Dokument geladen ist.
Selon http://caniuse.com/#feat=script-defer 97,79 % aller Browser unterstützen dies. 98,06 % unterstützen es zumindest teilweise.
Ein wichtiger Hinweis zur Browserkompatibilität: Unter Umständen können Internet Explorer 9 und frühere Versionen zeitversetzte Skripte nicht in der richtigen Reihenfolge ausführen. Wenn Sie diese Browser unterstützen müssen, lesen Sie bitte este zuerst!
(Um mehr zu erfahren und einige wirklich hilfreiche visuelle Darstellungen der Unterschiede zwischen asynchronen, aufgeschobenen und normalen Skripten zu sehen, lesen Sie die ersten beiden Links im Abschnitt Referenzen dieser Antwort)
Schlussfolgerung
Der derzeitige Stand der Technik ist es, Skripte in der <head> Tag verwenden und das async o defer Eigenschaften. Dadurch können Ihre Skripte so schnell wie möglich heruntergeladen werden, ohne dass Ihr Browser blockiert wird.
Das Gute daran ist, dass Ihre Website auch auf den 2 % der Browser, die diese Attribute nicht unterstützen, korrekt geladen wird, während die anderen 98 % schneller werden.
Referenzen
1 Stimmen
Falls du auch nur nach einer einfachen Lösung suchst und einen serverseitigen Generator wie Jekyll verwendest, empfehle ich dir, das Skript mit einzubinden. Das ist viel einfacher!
3 Stimmen
Wenn Sie von einer Suchmaschine kommen und danach suchen: Viele der Antworten sind nicht eindeutig genau die Stelle, an der das "Skript-Tag" am Ende stehen sollte . Wenn das "script"-Tag après </body>', führt die HTML-Validierung zu folgenden Ergebnissen _" Fehler: Skript mit falschem Start-Tag " (Option ankreuzen "Quelle" und klicken Sie "prüfen"_ um den HTML-Quelltext zu sehen). Es sollte sein antes de </body>'. (Das Ergebnis ist ähnlich, wenn das "script"-Tag ganz am Ende steht, nach dem </html> Tag.)
1 Stimmen
Dies wird auch behandelt in Ist es falsch, den <script>-Tag nach dem </body>-Tag zu platzieren? .
5 Stimmen
T.L.D.R. hat es in die
<head>Tag mitdeferAttribut, oder noch besser, machen Sie Ihr Skripttype='module'. Wir schreiben jetzt das Jahr 2022.