Detaillierte Einführung in das Vorladen von HTML5-Ressourcen (Link-Prefetch) (Beschleunigung Ihrer Webseiten)_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Detaillierte Einführung in das Vorladen von HTML5-Ressourcen (Link-Prefetch) (Beschleunigung Ihrer Webseiten)_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:48:02

Original

1562 Leute haben es durchsucht

Ich habe einige Techniken zur Geschwindigkeitsoptimierung vorgestellt, die auf dieser Website verwendet werden. In HTML5 ist eine neue Funktion zur Optimierung der Website-Geschwindigkeit entstanden: Vorladen/Vorabrufen von Seitenressourcen (Link-Prefetch).

Was ist das Vorladen/Vorabrufen von Seitenressourcen (Link-Prefetch)? Erklärung von MDN:

Das Vorabladen von Seitenressourcen (Link-Prefetch) ist eine vom Browser bereitgestellte Technik, die es dem Browser ermöglicht, in seiner Freizeit einige Dokumentressourcen herunterzuladen oder vorzulesen, und der Benutzer wird in Zukunft auf diese Ressourcen zugreifen. Eine Webseite kann eine Reihe von Vorladeanweisungen für den Browser festlegen. Wenn der Browser mit dem Laden der aktuellen Seite fertig ist, lädt er die angegebenen Dokumente stillschweigend im Hintergrund und speichert sie im Cache. Wenn ein Benutzer auf diese vorinstallierten Dokumente zugreift, kann der Browser sie schnell aus dem Cache abrufen und dem Benutzer bereitstellen.

Um es einfach auszudrücken: Lassen Sie den Browser andere Ressourcen (Seiten, Bilder, Videos usw.) vorladen, auf die der Benutzer nach dem Zugriff auf die aktuelle Seite wahrscheinlich zugreifen wird. Und die Methode ist super einfach!

Schreibmethode zum Vorladen von HTML5-Seitenressourcen (Link-Prefetch)

Code kopieren

Der Code lautet wie folgt:

wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5-Seitenressourcen Die Die Vorlade-/Vorabruffunktion (Link-Prefetch) wird über das Link-Tag implementiert. Geben Sie das rel-Attribut als „prefetch“ an und geben Sie die Adresse der zu ladenden Ressource im href-Attribut an. Firefox bietet außerdem eine zusätzliche Attributunterstützung:

Kopieren Sie den Code

Der Code lautet wie folgt:

title="Designed for Mozilla" href="mozpecific.css" _fcksavedurl=""mozpecific.css"" />

Prefetch kann auch unter HTTPS-Protokollressourcen verwendet werden.

Unter welchen Umständen sollten Seitenressourcen vorgeladen werden

Welche Art von Ressourcen wann auf Ihre Seite geladen werden, liegt ganz bei Ihnen. Hier sind einige Vorschläge:

1. Wenn die Seite über einen Diashow-ähnlichen Dienst verfügt, laden/lesen Sie die nächsten 1–3 Seiten und die vorherigen 1–3 Seiten vorab.
2. Laden Sie Bilder vor, die für die gesamte Website gelten.
3. Laden Sie die nächste Suchergebnisseite auf der Website vor.

Vorabladen von Seitenressourcen deaktivieren (Link-Prefetch)

In Firefox gibt es eine Option zum Deaktivieren der Funktion zum Vorladen von Seitenressourcen (Link-Prefetch). Sie können sie wie folgt einstellen:

1.user_pref("network.prefetch-next", false);
2. Vorsichtsmaßnahmen für das Vorladen von Seitenressourcen (Link-Prefetch)

Im Folgenden finden Sie einige Hinweise zum Vorladen von Seitenressourcen (Link-Prefetch):

1. Der Link-Prefetch funktioniert nicht domänenübergreifend, einschließlich des domänenübergreifenden Ziehens von Cookies.
2. Durch das Vorabladen (Link-Prefetch) werden Ihre Website-Verkehrsstatistiken verschmutzt, da einige im Browser vorab geladene Seiten möglicherweise nicht tatsächlich von Benutzern besucht werden.
3. Firefox bietet seit 2003 Unterstützung für diese Preload-Technologie (Link-Prefetch).

Die Leerlaufzeit des Browsers zum Laden einiger zusätzlicher Ressourcendateien zu nutzen, erscheint aufregend und gefährlich. Möchten Sie diese Techniken ausprobieren?