Link header
Der HTTP Link-Header bietet eine Möglichkeit, ein oder mehrere Links in HTTP-Headern zu serialisieren. Dies ermöglicht dem Server, einen Client auf eine andere Ressource mit Metadaten zur angeforderten Ressource hinzuweisen. Dieser Header hat die gleichen Semantiken wie das HTML <link> Element. Ein Vorteil der Verwendung des Link-Headers ist, dass der Browser vorab Ressourcen vorverbindet oder vorlädt, bevor das HTML selbst abgerufen und verarbeitet wird.
In der Praxis haben die meisten rel Link-Typen keine Auswirkungen, wenn sie mit dem HTTP-Header verwendet werden. Zum Beispiel funktioniert die icon-Relation nur in HTML, und stylesheet funktioniert nicht zuverlässig in allen Browsern (nur in Firefox). Die einzigen Relationen, die zuverlässig funktionieren, sind preconnect und preload, die mit 103 Early Hints kombiniert werden können.
| Header-Typ | Antwort-Header, Anfrage-Header |
|---|---|
| Verbotener Anfrage-Header | Nein |
| CORS-sicher gelisteter Antwort-Header | Nein |
Syntax
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>-
Die URI-Referenz muss zwischen
<und>eingeschlossen sein und prozentcodiert werden.
Parameter
Der Link-Header enthält Parameter, die mit ; getrennt werden und den Attributen des <link> Elements entsprechen. Werte können sowohl in Anführungszeichen als auch ohne angegeben werden, basierend auf den Feldwert-Komponentenregeln, sodass x=y gleichbedeutend mit x="y" ist.
Beispiele
URLs in spitze Klammern einschließen
Die URI (absolut oder relativ) muss zwischen < und > eingeschlossen sein:
Link: <https://example.com>; rel="preconnect"
Link: https://bad.example; rel="preconnect"
URLs kodieren
Die URI (absolut oder relativ) muss Zeichen über 255 prozentcodieren:
Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
Link: <https://example.com/苗条>; rel="preconnect"
Mehrere Links angeben
Sie können mehrere Links durch Kommas getrennt angeben, zum Beispiel:
Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"
Paginierung durch Links
Der Link-Header kann einem Client Paginierungsinformationen bereitstellen, die häufig zur programmgesteuerten Ressourcenzugrif verwendet werden:
Link: <https://api.example.com/issues?page=2>; rel="prev", <https://api.example.com/issues?page=4>; rel="next", <https://api.example.com/issues?page=10>; rel="last", <https://api.example.com/issues?page=1>; rel="first"
In diesem Fall zeigen rel="prev" und rel="next" die Link-Relationen für vorige und nächste Seiten, und es gibt rel="last" und rel="first" Parameter, die erste und letzte Seiten der Suchergebnisse bereitstellen.
Abrufpriorität steuern
Selbst wenn preload verwendet wird, um eine Ressource so früh wie möglich abzurufen, werden verschiedene Arten von Inhalten basierend auf der internen Priorisierung des Browsers früher oder später geladen. Das Attribut fetchpriority kann verwendet werden, um dem Browser zu signalisieren, dass eine bestimmte Ressource eine größere oder geringere relative Auswirkung auf die Benutzererfahrung haben wird als andere Ressourcen desselben Typs.
Zum Beispiel könnte der unten stehende Header verwendet werden, um style.css mit einer höheren Priorität als andere Stylesheets vorzuladen:
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Beachten Sie, dass sowohl die interne Priorisierung für den Abruf von Ressourcen als auch die Wirkung der fetchpriority-Anweisung von Browsern abhängt. Die fetchpriority-Anweisung sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht ableiten kann, dass eine bestimmte Ressource mit einer anderen Priorität behandelt werden sollte.
Spezifikationen
| Spezifikation |
|---|
| Web Linking # header |
Browser-Kompatibilität
Siehe auch
103 Early Hints<link>- Link-Relationen IANA-Register
- Optimieren der Ressourcenl-adevorgänge mit der Fetch Priority API für Informationen darüber, wie diese API Prioritäten in Chrome beeinflusst.