rel=prefetch
Das prefetch Schlüsselwort für das rel Attribut des <link> Elements gibt Browsern einen Hinweis darauf, dass der Benutzer die Zielressource wahrscheinlich für zukünftige Navigationen benötigt. Der Browser kann die Benutzererfahrung verbessern, indem er die Ressource im Voraus abruft und zwischenspeichert. <link rel="prefetch"> wird für Navigationen auf derselben Seite oder für Teilressourcen verwendet, die von Seiten derselben Seite genutzt werden.
Das Ergebnis wird im HTTP-Cache auf der Festplatte gespeichert. Aus diesem Grund ist es nützlich, Teilressourcen vorab abzurufen, selbst wenn sie nicht auf der aktuellen Seite verwendet werden. Sie könnten es auch verwenden, um das nächste Dokument vorzubestellen, das der Benutzer wahrscheinlich auf der Website besuchen wird. Sie müssen jedoch bei den Headern vorsichtig sein - bestimmte Cache-Control Header könnten das Vorabladen blockieren (zum Beispiel no-cache oder no-store).
Hinweis: Aufgrund solcher Einschränkungen wird empfohlen, stattdessen die Speculation Rules API für das Vorabladen von Dokumenten zu verwenden, wo sie unterstützt wird.
<link rel="prefetch"> ist funktional äquivalent zu einem fetch() Aufruf mit einer priority: "low" Option, außer dass ersteres im Allgemeinen eine noch niedrigere Priorität hat und ein Sec-Purpose: prefetch Header in der Anfrage gesetzt ist. Beachten Sie, dass Browser im Allgemeinen Vorabladeressourcen eine niedrigere Priorität als Preload-Ressourcen geben (z.B. angefordert über <link rel="preload">) — die aktuelle Seite ist wichtiger als die nächste.
Der Abruf für eine prefetch Operation führt zu einer HTTP-Anfrage, die den HTTP-Header Sec-Purpose: prefetch enthält. Ein Server könnte diesen Header verwenden, um die Cache-Timeouts für die Ressourcen zu ändern oder andere spezielle Behandlungen durchzuführen.
Die Anfrage wird auch den Sec-Fetch-Dest Header mit dem Wert empty enthalten.
Der Accept Header in der Anfrage entspricht dem Wert, der für normale Navigationsanfragen verwendet wird. Dies ermöglicht es dem Browser, die passenden zwischengespeicherten Ressourcen nach der Navigation zu finden.
Beispiele
Einfaches Prefetching
<link rel="prefetch" href="main.js" />
Navigation und Teilressourcen-Prefetching
Das Vorabladen kann verwendet werden, um sowohl HTML als auch Teilressourcen für eine mögliche nächste Navigation abzurufen. Ein häufiger Anwendungsfall ist eine einfache Website-Landingpage, die schwerere Ressourcen vorlädt, die vom Rest der Seite verwendet werden.
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />
Die Auswirkungen der Cache-Partitionierung
Viele Browser implementieren nun eine Form der Cache-Partitionierung, was <link rel="prefetch"> für Ressourcen nutzlos macht, die für verschiedene oberste Websites verwendet werden sollen. Dies schließt das Hauptdokument beim siteübergreifenden Navigieren ein. Zum Beispiel wäre das folgende Prefetch:
<link rel="prefetch" href="https://news.example/article" />
Von https://aggregator.example/ nicht zugänglich.
Spezifikationen
| Specification |
|---|
| HTML Standard # link-type-prefetch |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="prefetch">und anderen ähnlichen Leistungsverbesserungsfunktionen.