Signatur
Beschreibung
Die Eigenschaft as des HTMLLinkElement-Interfaces spiegelt das HTML-Attribut as wider. Sie gibt als String an, welche Art von Ressource ein <link> mit rel="preload" oder rel="modulepreload" lädt. Die Eigenschaft kann gelesen und geschrieben werden.
Anhand dieses Werts setzt der Browser die richtige Ladepriorität, den passenden Accept-Header und die zugehörige Content Security Policy-Direktive (z. B. script-src oder font-src). Außerdem kann er die vorgeladene Ressource später nur dann aus dem Speicher wiederverwenden, wenn as zum tatsächlichen Verwendungszweck passt. Stimmt der Typ nicht, lädt der Browser die Datei doppelt.
Gültige Werte sind unter anderem "audio", "document", "embed", "fetch", "font", "image", "object", "script", "style", "track", "video" und "worker". Ein ungültiger oder fehlender Wert ergibt beim Lesen einen leeren String "", denn das Attribut ist ein enumeriertes Attribut, und der Browser normalisiert ungültige Werte.
Die Eigenschaft wird vor allem dann gebraucht, wenn Preload-Hinweise dynamisch per JavaScript erzeugt werden, etwa um Schriftarten, Bilder für die nächste Ansicht oder Daten für einen späteren fetch()-Aufruf früh anzufordern.
Rückgabewert
"script" oder "font". Fehlt das Attribut oder ist sein Wert ungültig, ist das Ergebnis ein leerer String "". Beim Setzen wird der String in das Attribut as geschrieben.Beispiele
Wert eines vorhandenen Preload-Links lesen
// HTML: <link id="hauptSkript" rel="preload" href="/app.js" as="script">
const link = document.getElementById('hauptSkript');
console.log(link.as);
console.log(link.getAttribute('as'));Schriftart dynamisch vorladen
const preloadFont = (url) => {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'font';
link.type = 'font/woff2';
link.href = url;
// Für Schriftarten Pflicht, sonst wird die Datei doppelt geladen
link.crossOrigin = 'anonymous';
document.head.append(link);
return link;
};
const fontLink = preloadFont('/fonts/inter.woff2');
console.log(fontLink.as);Daten für späteren fetch()-Aufruf vorladen
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'fetch';
link.href = '/api/produkte.json';
link.crossOrigin = 'anonymous';
document.head.append(link);
// Später: der Browser nimmt die Antwort aus dem Preload-Speicher
const ladeProdukte = async () => {
const res = await fetch('/api/produkte.json', { mode: 'cors', credentials: 'same-origin' });
return res.json();
};
ladeProdukte().then((daten) => console.log(daten.length));Ungültige Werte werden zu leerem String
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'Stylesheet'; // kein gültiger Wert
console.log(JSON.stringify(link.as));
console.log(link.getAttribute('as'));
link.as = 'STYLE'; // Groß-/Kleinschreibung spielt keine Rolle
console.log(link.as);// Wichtig · Fallstricke
- Pflicht bei
rel="preload": Fehltasoder ist der Wert ungültig, wird die Ressource in den meisten Browsern gar nicht vorgeladen, und in der Konsole erscheint eine Warnung. - Doppeltes Laden: Wenn
as,crossOriginoder die URL nicht exakt zur späteren Nutzung passen, wird die Ressource ein zweites Mal geladen. Beias="font"undas="fetch"istcrossoriginpraktisch immer nötig, auch bei gleicher Herkunft. - Ungenutzte Preloads: Chrome warnt, wenn eine vorgeladene Ressource nicht innerhalb weniger Sekunden nach dem
load-Ereignis verwendet wird. Deshalb nur wirklich benötigte Ressourcen vorladen. - CSP: Die Anfrage wird mit der Direktive geprüft, die zum
as-Wert gehört (z. B.font-srcbei"font"). Ein falscher Typ kann dazu führen, dass die Anfrage blockiert wird. - modulepreload: Hier ist
asoptional, Standardwert ist"script". - Kompatibilität: Die Eigenschaft wird von allen aktuellen Browsern unterstützt. Firefox unterstützt
preloaderst ab Version 85 standardmäßig. Mitlink.relList.supports('preload')lässt sich die Unterstützung vorab prüfen.