Dasprefetch Schlüsselwort für dasrel-Attribut des<link>-Elements bietet einen Hinweis für Browser, dass der Benutzer die Zielressource wahrscheinlich für zukünftige Navigationen benötigt. Daher kann der Browser die Benutzererfahrung wahrscheinlich verbessern, indem er die Ressource vorab abruft und zwischenspeichert.<link rel="prefetch"> wird für Navigationen innerhalb derselben Seite oder für Unterressourcen, die von Seiten derselben Site verwendet werden, verwendet.

Das Ergebnis wird im HTTP-Cache auf der Festplatte gespeichert. Daher ist es nützlich, Unterressourcen vorab abzurufen, auch wenn sie auf der aktuellen Seite nicht verwendet werden. Sie könnten es auch verwenden, um das nächste Dokument vorab abzurufen, das der Benutzer wahrscheinlich auf der Site besuchen wird. Allerdings müssen Sie vorsichtig mit Headern sein — bestimmteCache-Control-Header könnten das Vorabrufen blockieren (z. B.no-cache oderno-store).

<link rel="prefetch"> ist funktional äquivalent zu einemfetch()-Aufruf mit einerpriority: "low"-Option, wobei ersteres generell eine noch niedrigere Priorität hat und einenSec-Purpose: prefetch-Header bei der Anfrage hat. Beachten Sie, dass Browser im Allgemeinen Vorabruf-Ressourcen eine niedrigere Priorität geben als Vorlade-Ressourcen (z. B. angefordert über<link rel="preload">) — die aktuelle Seite ist wichtiger als die nächste.

Der Abruf für eineprefetch-Operation führt zu einer HTTP-Anfrage, die den HTTP-HeaderSec-Purpose: prefetch enthält. Ein Server könnte diesen Header verwenden, um die Cache-Timeouts für die Ressourcen zu ändern oder andere spezielle Handhabungen durchzuführen.Die Anfrage enthält auch denSec-Fetch-Dest-Header mit dem Wertempty.

DerAccept-Header in der Anfrage entspricht dem Wert, der für normale Navigationsanfragen verwendet wird. Dies ermöglicht es dem Browser, die passenden zwischengespeicherten Ressourcen bei der folgenden Navigation zu finden.

Beispiele

Grundlegendes Prefetch

<link rel="prefetch" href="main.js" />

Navigation und Unterressourcen-Prefetches

Vorabruf kann verwendet werden, um sowohl HTML als auch Unterressourcen für eine mögliche nächste Navigation abzurufen. Ein häufiges Anwendungsbeispiel ist eine Einstiegsseite einer Website, die schwergewichtigere Ressourcen der restlichen Site abruft.

<link rel="prefetch" href="/app/style.css" /><link rel="prefetch" href="/landing-page" />

Die Auswirkungen der Cache-Partitionierung

Viele Browser implementieren jetzt eine Form derCache-Partitionierung, die<link rel="prefetch"> für Ressourcen nutzlos macht, die für die Verwendung durch verschiedene Top-Level-Sites vorgesehen sind. Dies schließt das Hauptdokument beim Navigieren über Websites hinweg ein. Beispielsweise wäre der folgende Vorabruf:

<link rel="prefetch" href="https://news.example/article" />

nicht zugänglich vonhttps://aggregator.example/.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Spekulatives Laden für einen Vergleich von<link rel="prefetch"> und anderen ähnlichen Leistungsverbesserungsmerkmalen.