Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
rel="preload"
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2021.
* Some parts of this feature may have varying levels of support.
Derpreload-Wert des<link>-Elements imrel-Attribut ermöglicht es Ihnen, Abrufanforderungen im<head>-Abschnitt des HTML zu deklarieren. Sie geben damit Ressourcen an, die Ihre Seite sehr bald benötigt und deren Laden Sie frühzeitig im Seitenlebenszyklus starten möchten, bevor die Haupt-Rendering-Mechanik des Browsers startet. Dies stellt sicher, dass sie früher verfügbar sind und weniger wahrscheinlich das Rendering der Seite blockieren, was die Leistung verbessert. Obwohl der Name den Begriffload enthält, lädt und führt er das Skript nicht aus, sondern plant lediglich dessen Download und Zwischenspeicherung mit höherer Priorität.
Die Grundlagen
Üblicherweise verwenden Sie<link>, um eine CSS-Datei zu laden, mit der Ihre Seite gestaltet wird:
<link rel="stylesheet" href="styles/main.css" />Hier jedoch verwenden wir einenrel-Wert vonpreload, der<link> in einen Vorlader für beliebige Ressourcen verwandelt, die wir möchten. Sie müssen auch angeben:
Ein Beispiel könnte so aussehen (siehe unserJS- und CSS-Beispielquellcode, undauch live):
<head> <meta charset="utf-8" /> <title>JS and CSS preload example</title> <link rel="preload" href="style.css" as="style" /> <link rel="preload" href="main.js" as="script" /> <link rel="stylesheet" href="style.css" /></head><body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script></body>Hier laden wir unsere CSS- und JavaScript-Dateien vor, sodass sie verfügbar sind, sobald sie für das spätere Rendering der Seite benötigt werden. Dieses Beispiel ist trivial, da der Browser wahrscheinlich die<link rel="stylesheet">- und<script>-Elemente im selben HTML-Abschnitt wie die Vorladungen entdeckt. Die Vorteile werden jedoch viel deutlicher sichtbar, je später die Ressourcen entdeckt werden und je größer sie sind. Zum Beispiel:
- Ressourcen, die innerhalb von CSS referenziert werden, wie Schriftarten oder Bilder.
- Ressourcen, die von JavaScript angefordert werden können, wie importierte Skripte.
preload bietet auch andere Vorteile. Die Verwendung vonas, um den Typ des vorzuladenden Inhalts anzugeben, ermöglicht es dem Browser:
- Die Ressource für zukünftige Anfragen im Cache zu speichern und bei Bedarf wiederzuverwenden.
- Die korrekteContent Security Policy auf die Ressource anzuwenden.
- Die richtigen
Accept-Anforderungsheader dafür festzulegen.
Welche Arten von Inhalten können vorgeladen werden?
Viele Arten von Inhalten können vorgeladen werden. Die möglichen Werte für dasas-Attribut sind:
fetch: Ressource, die mit einer Fetch- oder XHR-Anfrage abgerufen wird, wie z.B. ein ArrayBuffer, ein WebAssembly-Binärformat oder eine JSON-Datei.font: Schriftart-Datei.image: Bilddatei.script: JavaScript-Datei.style: CSS-Stylesheet.track: WebVTT-Datei.
Hinweis:Für das Vorladen vonfont undfetch muss dascrossorigin-Attribut gesetzt werden; sieheCORS-fähige Abrufe unten.
Hinweis:Weitere Details zu diesen Werten und den Web-Funktionen, für die sie vorgesehen sind, finden Sie in der HTML-Spezifikation — sieheLink-Typ "preload". Beachten Sie auch, dass die vollständige Liste der Werte, die dasas-Attribut annehmen kann, durch die Fetch-Spezifikation geregelt wird — sieheAnfrageziele.
Eingabe eines MIME-Typs
<link>-Elemente können eintype-Attribut akzeptieren, das den MIME-Typ der Ressource enthält, auf die das Element verweist. Dies ist besonders nützlich, wenn Ressourcen vorgeladen werden — der Browser verwendet den Wert destype-Attributs, um zu überprüfen, ob er diese Ressource unterstützt, und lädt sie nur herunter, wenn dies der Fall ist, andernfalls ignoriert er sie.
<head> <meta charset="utf-8" /> <title>Image preload example</title> <link rel="preload" href="flower.avif" as="image" type="image/avif" /></head><body> <picture> <source src="flower.avif" type="image/avif" /> <source src="flower.webp" type="image/webp" /> <img src="flower.jpg" /> </picture></body>Der Code im obigen Beispiel bewirkt, dass das Bildimage/avif nur in unterstützten Browsern vorgeladen wird — und für Benutzer, die Unterstützung fürimage/avif in ihren Browsern haben, bewirkt, dass tatsächlich dasimage/avif-Bild verwendet wird (da es die erste<source> ist, die angegeben ist). Das macht den Bilddownload hoffentlich kleiner für Benutzer, die Unterstützung fürimage/avif in ihren Browsern haben.
Beachten Sie, dass für Benutzer, deren Browser sowohlimage/avif als auchimage/webp Unterstützung haben, wenn in diesem Code auch ein<link rel="preload" href="flower.webp" as="image" type="image/webp">-Element angegeben wäre, dannbeideimage/avif- undimage/webp-Bilder vorgeladen würden — obwohl nur eines davon tatsächlich verwendet würde.
Daher wird abgeraten, das Vorladen für mehrere Typen derselben Ressource anzugeben. Stattdessen ist es am besten, das Vorladen nur für den Typ anzugeben, den die Mehrheit Ihrer Benutzer wahrscheinlich tatsächlich nutzen wird. Deshalb spezifiziert der Code im obigen Beispiel nicht das Vorladen desimage/webp-Bildes.
Das Fehlen des Vorladens verhindert jedoch nicht, dass dasimage/webp-Bild tatsächlich von denjenigen verwendet wird, die es benötigen: Für Benutzer, deren Browser keine Unterstützung fürimage/avif haben, aberimage/webp unterstützen, führt der Code im obigen Beispiel dazu, dass dasimage/webp-Bild verwendet wird — ohne es jedoch auch unnötig für die Mehrheit anderer Benutzer vorzulegen.
CORS-fähige Abrufe
Beim Vorladen von Ressourcen, die mit aktiviertemCORS abgerufen werden (z.B.fetch(),XMLHttpRequest oderSchriften), muss besonderes Augenmerk auf das Setzen descrossorigin-Attributs an Ihrem<link>-Element gelegt werden. Das Attribut muss entsprechend dem CORS-Modus und dem Anmeldedatenmodus der Ressource eingestellt werden, auch wenn der Abruf nicht über Ursprungskreuzungen erfolgt.
Wie oben erwähnt, ist ein interessanter Fall, auf den dies zutrifft, Schriftdateien. Aus verschiedenen Gründen müssen diese im Anonym-Modus CORS abgerufen werden (sieheSchriftabrufanforderungen).
Lassen Sie uns diesen Fall als Beispiel verwenden. Sie können den vollständigenBeispielquellcode auf GitHub ansehen (auch live ansehen):
<head> <meta charset="utf-8" /> <title>Web font example</title> <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin /> <link href="style.css" rel="stylesheet" /></head><body> …</body>Wir geben nicht nur die MIME-Typ-Hinweise in dentype-Attributen an, sondern wir stellen auch dascrossorigin-Attribut bereit, um sicherzustellen, dass der CORS-Modus des Vorladens dem späteren Schriftressourcen-Anforderung entspricht.
Einschließen von Medien
Ein schönes Feature von<link>-Elementen ist ihre Fähigkeit,media-Attribute zu akzeptieren. Diese könnenMedientypen oder vollständigeMedia Queries akzeptieren, was Ihnen ermöglicht, responsives Vorladen durchzuführen!
Betrachten wir ein Beispiel (siehe es auf GitHub —Quellcode,Live-Beispiel):
<head> <meta charset="utf-8" /> <title>Responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(width <= 600px)" /> <link rel="preload" href="bg-image-wide.png" as="image" media="(width > 600px)" /> <link rel="stylesheet" href="main.css" /></head><body> <header> <h1>My site</h1> </header> <script> const mediaQueryList = window.matchMedia("(width <= 600px)"); const header = document.querySelector("header"); if (mediaQueryList.matches) { header.style.backgroundImage = 'url("bg-image-narrow.png")'; } else { header.style.backgroundImage = 'url("bg-image-wide.png")'; } </script></body>Wir fügenmedia-Attribute in unsere<link>-Elemente ein, sodass ein schmales Bild vorgeladen wird, wenn der Benutzer ein schmales Ansichtsfenster hat, und ein breiteres Bild geladen wird, wenn er ein breites Ansichtsfenster hat. Wir verwendenWindow.matchMedia /MediaQueryList, um dies zu erreichen (sieheMedia Queries testen für mehr).
Diese Technik gilt auch für andere Ressourcentypen. Beispielsweise trägt beim Einsatz mit Schriften das Vorladen dazu bei, dass die Schriftart zum Renderzeitpunkt verfügbar ist, wodurch die Wahrscheinlichkeit eines ungestalteten Textflackerns (FOUT) verringert wird.
Dies muss sich nicht auf Bilder oder sogar Dateien desselben Typs beschränken — denken Sie groß! Möglicherweise könnten Sie ein vereinfachtes SVG-Diagramm vorladen und anzeigen, falls der Benutzer auf einem schmalen Bildschirm ist, wo Bandbreite und CPU potenziell eingeschränkter sind, oder ein komplexes Stück JavaScript vorladen, das dann verwendet wird, um ein interaktives 3D-Modell zu rendern, wenn die Ressourcen des Benutzers reichlich sind.
Scripting und Vorladungen
Hinweis:Verwenden Sie<link rel="modulepreload">, wenn Sie mitJavaScript-Modulen arbeiten.
Ein weiterer Vorteil dieser Vorladungen ist, dass Sie sie mit einem Skript ausführen können.Zum Beispiel erstellen wir hier eine Instanz vonHTMLLinkElement und fügen diese dann an das DOM an:
const preloadLink = document.createElement("link");preloadLink.href = "myscript.js";preloadLink.rel = "preload";preloadLink.as = "script";document.head.appendChild(preloadLink);Dies bedeutet, dass der Browser diemyscript.js-Datei vorlädt, sie jedoch noch nicht tatsächlich verwendet. Um sie zu verwenden, könnten Sie das tun:
const preloadedScript = document.createElement("script");preloadedScript.src = "myscript.js";document.body.appendChild(preloadedScript);Dies ist nützlich, wenn Sie ein Skript vorladen wollen, die Ausführung jedoch auf genau den Zeitpunkt verzögern möchten, wenn Sie es benötigen.
Spezifikationen
| Specification |
|---|
| HTML # link-type-preload |
Browser-Kompatibilität
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="preload">und anderen ähnlichen Leistungsverbesserungsfunktionen. - Preload: What Is It Good For? von Yoav Weiss