Detaillierte Einführung in das Vorladen von HTML5-Ressourcen (Link-Prefetch)

Dieser Artikel stellt hauptsächlich die detaillierte Einführung in das Vorladen von HTML5-Ressourcen (Link-Prefetch) vor, die einen bestimmten Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Ob es sich um einen Browser handelt Entwickler sind immer noch Entwickler gewöhnlicher Webanwendungen. Sie alle unternehmen eine gemeinsame Anstrengung: das Surfen im Internet schneller zu machen. Es gibt viele bekannte Techniken, die Ihre Website schneller machen können: Verwendung von CSS-Sprites, Verwendung von Bildoptimierungstools, Verwendung von .htaccess zum Festlegen von Seitenkopfinformationen und Cache-Zeit, JavaScript-Komprimierung, Verwendung von CDN usw.

Ich habe stellte einige der auf dieser Website verwendeten Techniken zur Geschwindigkeitsoptimierung vor. 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 Vorladen von Seitenressourcen (Link-Prefetch) ist eine vom Browser bereitgestellte Technik, die es dem Browser ermöglicht, in seiner Freizeit einige Dokumentressourcen herunterzuladen oder vorzulesen, die der Benutzer in Zukunft besuchen wird. diese Ressourcen. Eine Webseite kann eine Reihe von Preload-Anweisungen für den Browser festlegen. Wenn der Browser mit dem Laden der aktuellen Seite fertig ist, lädt er die angegebenen Dokumente 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 Besuch der aktuellen 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:

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.jb51.net/misc/3d-album/" /></p>
<p><!-- 预加载一个图片 -->
<link rel="prefetch" href=" <a href="http://www.jb51.net/wordpress/">http://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

Die Funktion zum Vorladen/Vorabrufen von HTML5-Seitenressourcen (Link-Prefetch) wird über das Link-Tag implementiert. Geben Sie das rel-Attribut als „prefetch“ an und geben Sie die Ressource an, die in die href geladen werden soll Attribut. Adresse. Firefox bietet außerdem eine zusätzliche Attributunterstützung:

Kopieren Sie den Code

Der Code lautet wie folgt:

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" href="2.html" />

Prefetch kann auch unter HTTPS-Protokollressourcen verwendet werden.

Unter welchen Umständen sollten Seitenressourcen vorgeladen werden?

Welche Art von Ressourcen auf Ihrer Seite geladen werden und wann Sie sie laden, 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 aller Funktionen zum Vorladen von Seitenressourcen (Link-Prefetch). Sie können sie wie folgt einstellen :

1.user_pref("network.prefetch-next", false);
2. Hinweise zum Vorladen von Seitenressourcen (Link-Prefetch)

Das Folgende sind einige Hinweise beim Vorladen von Seitenressourcen (Link-Prefetch):

1. Das Vorladen (Link-Prefetch) funktioniert nicht domänenübergreifend, einschließlich des domänenübergreifenden Abrufens 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?

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Vorladen von HTML5-Ressourcen (Link-Prefetch). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!