Link
Der HTTP-Header Link
bietet eine Möglichkeit, einen oder mehrere Links in HTTP-Headern zu serialisieren.
Damit kann der Server einem Client auf eine andere Ressource verweisen, die Metadaten über die angeforderte Ressource enthält.
Dieser Header hat die gleichen Semantiken wie das HTML-<link>
-Element.
Ein Vorteil der Verwendung des Link
-Headers ist, dass der Browser mit dem Präverbinden oder Vorladen von Ressourcen beginnen kann, bevor das HTML selbst abgerufen und verarbeitet wird.
In der Praxis haben die meisten rel
Link-Typen keine Wirkung, wenn sie mit dem HTTP-Header verwendet werden.
Zum Beispiel funktioniert die icon
-Beziehung nur in HTML und stylesheet
funktioniert nicht zuverlässig über alle Browser hinweg (nur in Firefox).
Die einzigen Beziehungen, die zuverlässig funktionieren, sind preconnect
und preload
, die mit 103 Early Hints
kombiniert werden können.
Header-Typ | Response-Header, Request-Header |
---|---|
Verbotener Header-Name | Nein |
CORS-sicher gelisteter Response-Header | Nein |
Syntax
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>
-
Die URI-Referenz muss zwischen
<
und>
eingeschlossen sein und percent-encoded (prozentkodiert) werden.
Parameter
Der Link-Header enthält Parameter, die mit ;
getrennt sind und den Attributen des <link>
-Elements entsprechen.
Werte können sowohl in Anführungszeichen als auch ohne angegeben werden, basierend auf den Regeln für Komponentenwerte. So ist x=y
gleichwertig mit x="y"
.
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"
Kodierung von URLs
Die URI (absolut oder relativ) muss Zeichen mit Codewerten größer als 255 percent-encode:
Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
Link: <https://example.com/苗条>; rel="preconnect"
Angabe mehrerer Links
Sie können mehrere Links angeben, die durch Kommas getrennt sind, zum Beispiel:
Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"
Seitenumbruch über Links
Der Link
-Header kann einem Client Seitenumbruchs-Informationen bereitstellen, die häufig verwendet werden, um Ressourcen programmatisch zuzugreifen:
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"
Verbindungen zu vorherigen und nächsten Seiten an, und es gibt rel="last"
und rel="first"
Parameter, die die erste und letzte Seite der Suchergebnisse bereitstellen.
Steuerung der Abrufpriorität
Auch wenn preload
verwendet wird, um eine Ressource so früh wie möglich zu laden, wird je nach interner Browser-Priorisierung verschiedener Inhaltstypen früher oder später abgerufen.
Das Attribut fetchpriority
kann verwendet werden, um dem Browser einen Hinweis darauf zu geben, dass eine bestimmte Ressource einen größeren oder geringeren relativen Einfluss auf die Benutzererfahrung haben wird als andere Ressourcen desselben Typs.
Zum Beispiel könnte der untenstehende Header verwendet werden, um style.css
mit einer höheren Priorität als andere Stylesheets vorzuladend:
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Beachten Sie, dass sowohl die interne Priorisierung für das Abrufen von Ressourcen als auch der Effekt der fetchpriority
-Direktive browserabhängig sind.
Die fetchpriority
-Direktive sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht ableiten kann, dass eine bestimmte Ressource mit anderer Priorität behandelt werden sollte.
Spezifikationen
Specification |
---|
Web Linking # header |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
103 Early Hints
<link>
- Link-Beziehungen IANA-Register
- Optimieren des Ressourcenladens mit der Fetch Priority API für Informationen darüber, wie diese API Prioritäten in Chrome beeinflusst.