Thema
- #Seiten laden
- #Browseroptimierung
- #Ressourcen laden
Browser rendern im Allgemeinen in der folgenden Reihenfolge.
- HTML-Parsing (von oben nach unten head -> body):
1. HTML-Parsing und DOM-Erstellung
2. Laden und Anwenden von CSS-Dateien (Rendering-Blockierung)
3. Laden und Ausführen von Skripten (Rendering-Blockierung)
4. Rendern des Inhalts des <body>-Abschnitts (Bilder, Text usw.)
Durch die Steuerung der Ressourcenpriorität des Browsers kann die Ladegeschwindigkeit der Seite optimiert werden.
Im Folgenden möchte ich die wichtigsten Attribute auflisten, mit denen die oben genannte Renderreihenfolge verbessert werden kann.
- JavaScript: async, defer, module
- CSS: preload, media
- Bilder: loading="lazy", srcset, sizes
- Sonstiges: prefetch, preconnect, dns-prefetch
JavaScript
async : Wird parallel zum HTML-Parsing heruntergeladen und sofort nach dem Download ausgeführt. Wenn eine Ressource der Seite mit diesem JS-Code verknüpft ist, ist es besser, das async-Attribut zu entfernen.
defer : Wird parallel zum HTML-Parsing heruntergeladen und nach Abschluss des HTML-Parsings ausgeführt. = Die Reihenfolge ist garantiert. Wenn die Ausführung erst nach dem vollständigen Rendern des HTML-Codes erfolgen soll, fügen Sie das defer-Attribut hinzu.
Der Browser lädt standardmäßig zuerst das HTML. Wenn sich jedoch im head-Tag eine Skriptquelle befindet, wird das Rendern blockiert. Durch Hinzufügen der beiden oben genannten Attribute kann die Blockierung des HTML-Renderings verhindert werden.
CSS
stylesheet : Dies ist der Standardwert. Es ist ein Element, das das Rendern blockiert und wird verwendet, wenn CSS unbedingt geladen werden muss.
preload : Lädt im Voraus herunter, ohne das Rendern zu blockieren. Zum Zeitpunkt des onload-Ereignisses wird es in ein Stylesheet geändert und der Stil wird angewendet.
media: Rendert, wenn die Bildschirmgrößenbedingung erfüllt ist.
Bilder
loading="lazy" : Lädt das Bild, wenn es auf dem Bildschirm erscheint. (Wenn sich die Scrollposition in der Nähe des Elements befindet, in dem sich das Bild befindet)
srcset : Wählt das optimale Bild entsprechend der Bildschirmgröße aus. (Optimierung der Bildgröße)
sizes : Gibt dem Browser einen Hinweis, welches Bild er je nach Viewport-Größe auswählen soll.
Im Fall des letzten img-Tags, wenn Bilder mit einer Breite von 480 Pixel und 1024 Pixel vorhanden sind, wird aufgrund des size-Attributs bei einer max-width von 600 Pixel ein Bild mit 480 Pixel und ansonsten ein Bild mit 1024 Pixel angezeigt.
* Im E-Commerce gibt es auf einer Seite oft Dutzende von Bildern. Daher ist die Reduzierung der Bildgröße sehr effektiv.
Beispielsweise gibt es auf der Suchergebnis-Seite mindestens 20 Bilder, und die Suche wird 100.000 Mal pro Tag durchgeführt...
Sonstiges
rel="prefetch": Lädt Ressourcen im Voraus, bevor zur nächsten Seite gewechselt wird, um die Ladegeschwindigkeit der nächsten Seite zu verbessern.
rel="preconnect": Stellt eine Netzwerkverbindung zu einem bestimmten Link im Voraus ein. (Große Videos, Schriftarten usw.)
rel="dns-prefetch": Ruft den DNS des externen Ressourcen ab, um die Ressourcen schneller zu laden. (hauptsächlich externes CDN)
* preconnect vs dns-prefetch
preconnect ist eine TCP-Verbindung (DNS - TCP-Handshake - TLS-Handshake) und daher eine ressourcenintensive Operation, die Browserressourcen belegt. Es wird verwendet, wenn externe Ressourcen schnell geladen werden müssen. (Sehr wichtige Ressourcen und schnelles Rendering dieser Ressourcen ist wichtig)
dns-prefetch ruft nur den DNS ab und ist daher ressourcenschonender. Es ist geeignet für nicht wichtige Ressourcen, die später abgerufen werden.
Kommentare0