103 Early Hints
Die HTTP 103 Early Hints
informational response kann von einem Server gesendet werden, während er noch eine Antwort vorbereitet. Sie enthält Hinweise auf die Websites und Ressourcen, die der Server in der endgültigen Antwort verlinken wird.
Dies ermöglicht es einem Browser, bereits zu Seiten vorzuverbinden oder Ressourcen vorzuladen, noch bevor der Server die endgültige Antwort vorbereitet und gesendet hat.
Vorab geladene Ressourcen, die durch frühe Hinweise angegeben werden, werden vom Client geladen, sobald die Hinweise empfangen werden.
Die frühe Hinweis-Antwort ist hauptsächlich zur Verwendung mit dem Link
-Header gedacht, der die zu ladenden Ressourcen angibt.
Sie kann auch einen Content-Security-Policy
-Header enthalten, der während der Verarbeitung des frühen Hinweises durchgesetzt wird.
Ein Server kann mehrere 103
-Antworten senden, beispielsweise nach einer Umleitung.
Browser verarbeiten nur die erste Antwort mit frühen Hinweisen, und diese muss verworfen werden, wenn die Anfrage zu einer redirect über eine andere Ursprungsdomäne führt.
Hinweis:
Aus Kompatibilitäts- und Sicherheitsgründen wird empfohlen, HTTP 103 Early Hints
-Antworten nur über HTTP/2 oder später zu senden, es sei denn, es ist bekannt, dass der Client informierende Antworten korrekt verarbeitet.
Die meisten Browser beschränken die Unterstützung aus diesem Grund auf HTTP/2 oder später. Siehe Browser-Kompatibilität unten. Trotz dieser Empfehlung verwenden die untenstehenden Beispiele die HTTP/1.1-Notation gemäß der üblichen Konvention.
Syntax
103 Early Hints
Beispiele
Beispiel für Vorverbindung
Die folgende 103
Early Hint-Antwort zeigt eine Antwort, bei der der Server angibt, dass der Client eine Vorverbindung zu einem bestimmten Ursprung (https://cdn.example.com
) herstellen möchte.
Wie das HTML-Attribut rel=preconnect
ist dies ein Hinweis darauf, dass die Seite wahrscheinlich Ressourcen vom Ursprung der Zielressource benötigt, und dass der Browser die Benutzererfahrung verbessern kann, indem er vorzeitig eine Verbindung zu diesem Ursprung herstellt.
103 Early Hint
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin
Dieses Beispiel stellt zwei Vorverbindungen zu https://cdn.example.com
her:
- Die erste Verbindung würde zum Laden von Ressourcen verwendet, die ohne CORS abgerufen werden können, wie z. B. Bilder.
- Die zweite Verbindung umfasst das
crossorigin
-Attribut und würde zum Laden von CORS-geschützten Ressourcen verwendet werden, wie z. B. Schriften.
CORS-geschützte Ressourcen müssen über eine vollständig separate Verbindung abgerufen werden. Wenn Sie nur eine Art von Ressource von einem Ursprung benötigen, müssen Sie nur einmal Vorverbindungen herstellen.
Anschließend sendet der Server die endgültige Antwort.
Diese enthält ein Cross-Origin-Schriftartenvorladen und ein <img>
, das vom zusätzlichen Ursprung geladen wird.
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="preload" href="https://cdn.example.com/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
...
<img src="https://cdn.example.com/images/image.jpg" alt="">
...
Beispiel für Vorladen
Die folgende 103
Early Hint-Antwort gibt an, dass ein Stylesheet style.css
möglicherweise für die endgültige Antwort benötigt wird.
103 Early Hint
Link: </style.css>; rel=preload; as=style
Anschließend sendet der Server die endgültige Antwort. Diese enthält einen Link zu dem Stylesheet, das möglicherweise bereits aus dem frühen Hinweis vorab geladen wurde.
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Antwort mit frühem Hinweis und CSP
Das folgende Beispiel zeigt die gleiche Early Hint-Antwort, jedoch mit einem Content-Security-Policy
-Header.
103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style
Die frühe Antwort beschränkt das Vorladen auf denselben Ursprung wie die Anfrage. Das Stylesheet wird vorab geladen, wenn der Ursprung übereinstimmt.
Die endgültige Antwort könnte die CSP auf none
setzen, wie unten gezeigt.
Das Stylesheet wurde bereits vorab geladen, wird aber beim Rendern der Seite nicht verwendet.
200 OK
Content-Security-Policy: style-src: none;
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Spezifikationen
Specification |
---|
An HTTP Status Code for Indicating Hints # early-hints |
HTML # early-hints |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
Link
- Cross-Origin Resource Sharing (CORS)
- Content Security Policy (CSP)
rel="preconnect"
(<link>
-Attribut)rel="preload"
(<link>
-Attribut)fetchpriority
(<link>
-Attribut)- Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone vom Cloudflare-Blog