Folgendes passiert, wenn ein Browser eine Website mit einem <script>Tag lädt :
- Holen Sie sich die HTML-Seite (zB index.html)
- Beginnen Sie mit dem Parsen des HTML-Codes
- Der Parser trifft auf ein
<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 beendet ihn nicht mehr.
- Nach einiger Zeit wird das Skript heruntergeladen und anschließend ausgeführt.
- Der Parser analysiert weiterhin den Rest des HTML-Dokuments.
Schritt 4 führt zu einer schlechten Benutzererfahrung. Ihre Website wird grundsätzlich erst geladen, wenn Sie alle Skripte heruntergeladen haben. Wenn es eine Sache gibt, die Benutzer hassen, wartet sie darauf, dass eine Website geladen wird.
Warum passiert das überhaupt?
Jedes Skript kann seinen eigenen HTML-Code über document.write()oder andere DOM-Manipulationen einfügen . Dies bedeutet, dass der Parser warten muss, bis das Skript heruntergeladen und ausgeführt wurde, bevor er den Rest des Dokuments sicher analysieren kann. Immerhin das Skript könnte haben einen eigenen HTML - Code in das Dokument eingefügt.
Die meisten JavaScript-Entwickler bearbeiten das DOM jedoch nicht mehr, während das Dokument geladen wird. Stattdessen warten sie, bis das Dokument geladen wurde, 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";
});
Da Ihr Browser nicht weiß, dass my-script.js das Dokument erst ändern wird, wenn es heruntergeladen und ausgeführt wurde, beendet der Parser das Parsen.
Antiquierte Empfehlung
Der alte Ansatz zur Lösung dieses Problems bestand darin, <script>Tags am unteren Rand Ihres zu platzieren <body>, da dadurch sichergestellt wird, dass der Parser nicht bis zum Ende blockiert wird.
Dieser Ansatz hat sein eigenes Problem: Der Browser kann erst mit dem Herunterladen der Skripte beginnen, wenn das gesamte Dokument analysiert wurde. Bei größeren Websites mit großen 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 wird, wechseln die Benutzer zu einer anderen Website.
In einer optimalen Lösung würde der Browser so schnell wie möglich mit dem Herunterladen Ihrer Skripte beginnen und gleichzeitig den Rest Ihres Dokuments analysieren.
Der moderne Ansatz
Heute unterstützen Browser die Attribute asyncund deferin Skripten. Diese Attribute teilen dem Browser mit, dass das Parsen sicher fortgesetzt werden kann, 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. Dies bedeutet, dass das Skript ausgeführt wird, sobald es heruntergeladen wurde, ohne den Browser in der Zwischenzeit zu blockieren.
Dies bedeutet, dass Skript 2 vor Skript 1 heruntergeladen und ausgeführt werden kann.
Laut http://caniuse.com/#feat=script-async unterstützen 97,78% aller Browser dies.
verschieben
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
Skripte mit dem Attribut defer werden der Reihe nach ausgeführt (dh zuerst Skript 1, dann Skript 2). Dies blockiert auch nicht den Browser.
Im Gegensatz zu asynchronen Skripten werden verzögerte Skripte erst ausgeführt, nachdem das gesamte Dokument geladen wurde.
Laut http://caniuse.com/#feat=script-defer unterstützen 97,79% aller Browser dies. 98,06% unterstützen es zumindest teilweise.
Ein wichtiger Hinweis zur Browserkompatibilität: Unter bestimmten Umständen führt IE <= 9 verzögerte Skripte in unregelmäßiger Reihenfolge aus. Wenn Sie diese Browser unterstützen müssen, lesen Sie dies bitte zuerst!
Fazit
Der aktuelle Stand der Technik besteht darin, Skripte in das <head>Tag einzufügen und die Attribute asyncoder zu verwenden defer. Auf diese Weise können Ihre Skripte so schnell wie möglich heruntergeladen werden, ohne Ihren Browser zu blockieren.
Das Gute ist, dass Ihre Website in 2% der Browser, die diese Attribute nicht unterstützen, immer noch korrekt geladen werden sollte, während die anderen 98% beschleunigt werden.