103 Early Hints
Die HTTP 103 Early Hints
Informative Antwort kann von einem Server gesendet werden, während dieser noch eine Antwort vorbereitet. Sie enthält Hinweise zu den Seiten und Ressourcen, auf die die endgültige Antwort des Servers voraussichtlich verweist.
Dies ermöglicht es einem Browser, bereits vor dem Eintreffen der vollständigen Serverantwort, eine Preconnect zu Websites herzustellen oder mit dem Preloading von Ressourcen zu beginnen.
Vom Client angeforderte Ressourcen, die durch frühe Hinweise angegeben werden, werden abgerufen, sobald die Hinweise empfangen werden.
Die Antwort der frühen Hinweise ist hauptsächlich zur Verwendung mit dem Link
-Header vorgesehen, der die zu ladenden Ressourcen angibt.
Sie kann auch einen Content-Security-Policy
-Header enthalten, der beim Verarbeiten des frühen Hinweises durchgesetzt wird.
Ein Server könnte mehrere 103
-Antworten senden, zum Beispiel nach einer Weiterleitung.
Browser verarbeiten nur die erste Antwort der frühen Hinweise, und diese Antwort muss verworfen werden, wenn die Anfrage zu einer Weiterleitung über eine andere Domain 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 informative Antworten korrekt verarbeitet.
Die meisten Browser unterstützen dies aus diesem Grund nur ab HTTP/2. Siehe unten zur Browser-Kompatibilität. Dennoch verwenden die Beispiele unten die übliche HTTP/1.1-Notation.
Syntax
103 Early Hints
Beispiele
Beispiel zur Preconnect
Die folgende 103
frühe Hinweis-Antwort zeigt eine Antwort, bei der der Server anzeigt, dass der Client möglicherweise eine Verbindung zu einem bestimmten Ursprung (https://cdn.example.com
) vorab aufbauen möchte.
Ähnlich 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 das Benutzererlebnis verbessern kann, indem er proaktiv eine Verbindung zu diesem Ursprung aufbaut.
103 Early Hint
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin
Dieses Beispiel stellt zweimal eine Vorabverbindung zu https://cdn.example.com
her:
- Die erste Verbindung würde zum Laden von Ressourcen verwendet, die ohne CORS abgerufen werden können, wie zum Beispiel Bilder.
- Die zweite Verbindung enthält das
crossorigin
-Attribut und würde zum Laden von CORS-geschützten Ressourcen verwendet, wie beispielsweise Schriftarten.
CORS-geschützte Ressourcen müssen über eine völlig separate Verbindung abgerufen werden. Wenn Sie nur einen Ressourcentyp von einem Ursprung benötigen, reicht es aus, nur einmal eine Vorabverbindung herzustellen.
Anschließend sendet der Server die endgültige Antwort.
Diese beinhaltet ein crossorigin-Schriftart-Preload 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 zum Preload
Die folgende 103
frühe Hinweis-Antwort zeigt, dass ein Stylesheet style.css
möglicherweise von der endgültigen 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 zum Stylesheet, das möglicherweise bereits durch den frühen Hinweis vorab geladen wurde.
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Frühe Hinweis-Antwort mit CSP
Das folgende Beispiel zeigt die gleiche frühe Hinweis-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 Preloading auf den gleichen 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 jedoch 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 Standard # 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 auf dem CloudFlare-Blog