Übersicht
Bevor der Browser eine Seite rendern kann, muss er durch Parsen des HTML-Markups den DOM-Baum erstellen. Wenn der Parser bei diesem Prozess auf ein Skript stößt, muss er es anhalten und ausführen bevor es mit dem Parsen des HTML-Codes fortfahren kann. Bei einem externen Skript ist der Parser ebenfalls auf den Download der Ressource warten, was zu einem oder mehreren Netzwerk-Roundtrips führen kann, die Zeit bis zum ersten Rendern der Seite verzögern. Weitere Informationen finden Sie unter . Interaktivität mit JavaScript hinzufügen, um mehr darüber zu erfahren, wie JavaScript die kritischen Rendering-Pfad.Empfehlungen
Sie sollten blockierende JavaScript-Dateien vermeiden und minimieren, insbesondere externe Skripts, die abgerufen werden müssen, bevor sie ausgeführt werden können. Skripts, die zum Rendern von Seiteninhalten erforderlich sind kann inline eingefügt werden, um zusätzliche Netzwerkanfragen zu vermeiden, der Inline-Inhalt muss jedoch klein sein. und muss schnell umgesetzt werden, um gute Ergebnisse zu erzielen. Skripts, die für den Anfang nicht wichtig sind Das Rendern sollte asynchron oder erst nach dem ersten Rendern erfolgen. Wichtige Hinweise Um die Ladezeit zu verbessern, müssen Sie auch die CSS-Bereitstellung zu optimieren.Inline-JavaScript
Externe Blockierskripte zwingen den Browser dazu, auf das Abrufen des JavaScript-Codes zu warten. womit ein oder mehrere Netzwerk-Roundtrips hinzugefügt werden können, bevor die Seite gerendert werden kann. Wenn das externe Skripts klein sind, können Sie deren Inhalt direkt in das HTML-Dokument einfügen und vermeiden Latenz von Netzwerkanfragen. Angenommen, das HTML-Dokument sieht so aus:
<html>
<head>
<script type="text/javascript" src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Und die Ressource small.js sieht so aus:
/* contents of a small JavaScript file */Dann können Sie das Skript wie folgt inline einfügen:
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Durch das Einfügen des Skriptinhalts wird die externe Anfrage für small.js entfernt und
damit das erste Rendering schneller geht. Beachten Sie jedoch, dass die Inline-Anzeige
die Größe des HTML-Dokuments hat und dass dieselben Skriptinhalte
über mehrere Seiten verfügen. Aus diesem Grund sollten Sie nur kleine Skripts inline einfügen, um eine optimale Leistung zu erzielen.
JavaScript asynchron verwenden
Standardmäßig blockiert JavaScript die DOM-Konstruktion und verzögert so die Zeit bis zum ersten Rendern. Bis Verhindert, dass JavaScript den Parser blockiert. Wir empfehlen die Verwendung des HTML-async
in externen Skripts verwenden. Hier einige Beispiele:
<script async src="my.js">Weitere Informationen finden Sie unter . Parser-Blockierung vs. asynchrones JavaScript, um mehr über asynchrone Skripts zu erfahren. Asynchrone Skripts werden nicht unbedingt in der angegebenen Reihenfolge ausgeführt und sollten
document.write Skripts, die von der Ausführungsreihenfolge abhängen oder auf die auf sie zugreifen oder diese ändern müssen
Das DOM oder CSSOM der Seite muss möglicherweise neu geschrieben werden, um diese Einschränkungen zu berücksichtigen.
JavaScript-Code später laden
Das Laden und Ausführen von Skripts, die für das anfängliche Rendering der Seite nicht erforderlich sind, erst nachdem das erste Rendering oder andere kritische Teile der Seite abgeschlossen wurden wird geladen. Dies kann dazu beitragen, Ressourcenkonflikte zu reduzieren und die Leistung zu verbessern.FAQ
- Was muss ich beim Verwenden einer JavaScript-Bibliothek wie jQuery beachten?
- Viele JavaScript-Bibliotheken wie JQuery werden verwendet, um die Seite zu optimieren, zusätzliche Interaktivität, Animationen und andere Effekte. Viele davon Verhaltensweisen hinzugefügt werden, nachdem der „Above the fold“-Inhalt ohne Scrollen sichtbar ist. Untersuchen Sie, wie Sie solches JavaScript asynchron machen oder deren Laden verzögern.
- Was ist, wenn ich zum Erstellen der Seite ein JavaScript-Framework verwende?
- Wenn der Inhalt der Seite mit clientseitigem JavaScript erstellt wird, sollten Sie die relevanten JavaScript-Module inline einfügen, um zusätzliche Netzwerk-Roundtrips. Ebenso kann die Nutzung von serverseitigem Rendering Verbessern Sie die Leistung beim ersten Seitenaufbau: rendern Sie JavaScript-Vorlagen auf dem Server, um schnell laden und dann clientseitige Vorlagen verwenden. Weitere Informationen Informationen zum serverseitigen Rendering finden Sie unter http://youtu.be/VKTWdaupft0?t=14m28s.
Feedback
War diese Seite hilfreich?
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">