Anforderungen: Beim Anfordern einer Website muss man viele Ressourcen laden, Netzwerkanfragen beeinflussen auch die Geschwindigkeit des Renderings der Webseite. Wenn der Nutzer auf die Eingabe klickt, können einige Ressourcen das Nutzererlebnis beeinträchtigen. Inzwischen sind die schnelle Entwicklung des Internets, Bandbreite und Traffic nicht mehr so teuer. Wie kann man Ressourcen im Voraus vorladen oder eine Verbindung zum Zielserver herstellen?
Preconnect
Der Keyword-Preconnect für Elementeigenschaften ist ein Hinweis an den Browser, dass der Nutzer möglicherweise Ressourcen aus der Zielquelle benötigt, damit der Browser sie nutzen kannVerbessern Sie das Nutzererlebnis, indem Sie präventiv Verbindungen zu dieser Quelle initiieren.。
Preconnect ermöglicht es dem Browser, eine Reihe von Aktionen auszuführen, bevor eine HTTP-Anfrage offiziell an den Server gesendet wird, darunter DNS-Auflösung, TLS-Aushandlung und TCP-Handshake, was die Roundtrip-Latenz eliminiert und dem Nutzer Zeit spart.
Preconnect ist ein wichtiges Optimierungsmittel, um den Rundweg in vielen Anfragen zu reduzieren – in manchen Fällen um Hunderte oder Tausende Millisekunden Latenz.
Hier ist ein Beispiel für die Verwendung von Preconnect für Google Fonts, bei dem der Browser durch das Hinzufügen eines Preconnect-Prompts zu fonts.gstatic.com sofort eine Anfrage startet, die parallel zur CSS-Anfrage ausgeführt wird. In diesem Szenario eliminiert Preconnect drei RTTs (Round-Trip Time) vom kritischen Pfad undVerringerte Latenz um mehr als eine halbe Sekunde。
Die Syntax ist wie folgt:
Dokumentation:Der Hyperlink-Login ist sichtbar.
DNS-Prefetch verwendet DNS-Prefetch
Das Schlüsselwort dns-Prefetch des Elementattributs dient dazu, den Browser darauf aufmerksam zu machen, dass der Nutzer möglicherweise eine Ressource aus der Zielquelle benötigt, damit der Browser das Nutzererlebnis verbessern kann, indem er vorsorglich eine DNS-Auflösung für diese Quelle durchführt.
DNS-Prefetching ermöglicht es dem Browser, während des Nutzers auf der Seite zu seinDNS-Auflösung im Hintergrund ausführen。 So wird die DNS-Auflösung abgeschlossen, wenn der Nutzer auf einen Link klickt, sodass die Latenz reduziert werden kann. DNS-Prefetching einer bestimmten URL kann durch Hinzufügen von rel="dns-prefetch" zu den Eigenschaften eines Link-Tags erfolgen; wir empfehlen, Google Fonts, Google Analytics und CDN zu verwalten.
"DNS-Anfragen haben sehr wenig Bandbreitenverkehr, aber die Latenz kann besonders auf mobilen Geräten hoch sein. DNS, das durch Prefetching spezifiziert wird, kann in bestimmten Szenarien die Latenz erheblich reduzieren, etwa wenn ein Nutzer auf einen Link klickt. Manchmal kann sogar eine Verzögerung um eine Sekunde reduziert werden – Mozilla Developer Network"
Die Syntax ist wie folgt:
Dokumentation:Der Hyperlink-Login ist sichtbar.
Vorspannung vorgeladen
Der Preload-Wert der Element-Eigenschaft erlaubt es Ihnen, eine Fetch-Anfrage in HTML zu deklarieren, in der die Ressourcen angegeben sind, die die Seite bald benötigen wird, und Sie sollten früh im Lebenszyklus der Seite laden, bevor der Hauptrendering-Mechanismus des Browsers startet. Dies stellt sicher, dass sie früher verfügbar sind und weniger wahrscheinlich das Rendering der Seite blockieren, was die Leistung verbessert. Selbst wenn der Name den Begriff "Laden" enthält, wird das Skript nicht geladen und ausgeführt, sondern es einfach als Download und Cache mit höherer Priorität geplant.
Preload ist ein neuer Webstandard, der steuert, wie bestimmte Ressourcen geladen werden – ein Upgrade des Subresource Prefetch, der im Januar 2016 eingestellt wurde. Dieser Befehl kann <link> verwendet werden in , z. B. <link rel="preload">. Im Allgemeinen ist es am besten, Preload zu verwenden, um Ihre wichtigsten Ressourcen wie Bilder, CSS, JavaScript und Schriftdateien zu laden. Dies darf nicht mit dem Browser-Preloading verwechselt werden, das nur Ressourcen vorlädt, die in HTML deklariert sind. Die Preload-Direktive überwindet diese Einschränkung tatsächlich, ermöglicht das Vorladen von Ressourcen, die in CSS und JavaScript definiert sind, und ermöglicht Entscheidungen darüber, wann jede Ressource angewendet wird.
Preload unterscheidet sich von Prefetch dadurch, dass es sich auf die aktuelle Seite konzentriert und Ressourcen mit hoher Priorität lädt, während Prefetch sich auf die Ressource konzentriert, die die nächste Seite lädt, und mit niedriger Priorität lädt. Beachte auch, dass Preload das Onload-Event des Fensters nicht blockiert.
Viele verschiedene Inhaltstypen können vorinstalliert werden. Die möglichen Immobilienwerte sind:
Audio: Eine Audiodatei, die üblicherweise für <audio>verwendet wird.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Einbetten: Die Ressource, die im Element eingebettet werden soll<embed>.
fetch: Eine Ressource, auf die über Fetch oder XHR-Anfrage wie eine ArrayBuffer- oder JSON-Datei zugegriffen werden kann.
font: 字体文件。
Bild: Bilddatei.
Objekt: Die Ressource, die im Element eingebettet werden soll<object>.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
Worker: Ein JavaScript-Webworker oder Shared Worker.
Video: Eine Videodatei, die üblicherweise für <video>verwendet wird.
Die Syntax ist wie folgt:
Dokumentation:Der Hyperlink-Login ist sichtbar.
|
Veröffentlicht am 26.09.2022 21:45:08
|
|
|
|
Veröffentlicht am 28.09.2022 08:54:26
|
