HTMLScriptElement.fetchPriority — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.fetchPriority

Beschreibung

Die Eigenschaft fetchPriority spiegelt das HTML-Attribut fetchpriority eines <script>-Elements wider. Damit gibt man dem Browser einen Hinweis, wie er den Netzwerkabruf eines externen Skripts (src) im Vergleich zu anderen Skripten desselben Typs priorisieren soll. Der Browser behandelt den Wert als Empfehlung und muss sich nicht daran halten.

Erlaubt sind drei Werte:

"high" – das Skript wird gegenüber anderen externen Skripten bevorzugt geladen.
"low" – das Skript wird zurückgestellt, z. B. für Analytics oder nicht kritische Widgets.
"auto" – Standard: der Browser entscheidet selbst.

Sinnvoll ist das vor allem bei async- oder defer-Skripten, deren Standardpriorität oft niedrig ist, oder bei dynamisch erzeugten Skripten. So kann man ein kritisches Skript (etwa für den sichtbaren Bereich der Seite) früher laden und unwichtige Skripte von Drittanbietern bremsen, damit sie wichtigen Ressourcen keine Bandbreite wegnehmen.

Ungültige Werte gibt der Getter als "auto" zurück. Die Eigenschaft wirkt sich nur auf den Netzwerkabruf aus, nicht auf die Ausführungsreihenfolge. Die bestimmen weiterhin async, defer und type="module".

Parameter

Name	Typ	Default	Beschreibung
$value	"high" \| "low" \| "auto"	"auto"	Beim Setzen: der gewünschte Prioritätshinweis. Ein ungültiger Wert wird zwar ins Attribut geschrieben, der Getter liefert dann aber `"auto"`.

Rückgabewert

Typ

string

Beschreibung

Einer der Werte "high", "low" oder "auto". Fehlt das Attribut oder ist sein Wert ungültig, kommt "auto" zurück.

Beispiele

Priorität eines vorhandenen Skripts auslesen

// HTML: <script id="app" src="/js/app.js" fetchpriority="high" defer></script>
const appScript = document.getElementById('app');
console.log(appScript.fetchPriority);

// Skript ohne Attribut
const other = document.createElement('script');
console.log(other.fetchPriority);

high auto

Kritisches Skript dynamisch mit hoher Priorität laden

const loadScript = (src, priority = 'auto') =>
  new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.fetchPriority = priority; // vor dem Einfügen setzen!
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Laden fehlgeschlagen: ${src}`));
    document.head.append(script);
  });

await loadScript('/js/hero-carousel.js', 'high');
console.log('Karussell bereit');

Karussell bereit

Drittanbieter-Skripte niedrig priorisieren

const thirdParty = [
  'https://example.com/analytics.js',
  'https://example.com/chat-widget.js'
];

for (const src of thirdParty) {
  const s = document.createElement('script');
  s.src = src;
  s.async = true;
  if ('fetchPriority' in s) {
    s.fetchPriority = 'low';
  }
  document.body.append(s);
}

console.log([...document.scripts].map((s) => s.fetchPriority));

["auto", "low", "low"] // je nach vorhandenen Skripten

Verhalten bei ungültigen Werten

const s = document.createElement('script');
s.fetchPriority = 'urgent';
console.log(s.getAttribute('fetchpriority'));
console.log(s.fetchPriority);

urgent auto

// Wichtig · Fallstricke

Nur ein Hinweis: Browser dürfen den Wert ignorieren oder unterschiedlich umsetzen. Die tatsächliche Wirkung sollte man in den DevTools prüfen (Netzwerk-Tab, Spalte „Priority“).
Zeitpunkt: Die Eigenschaft muss vor dem Einfügen ins DOM bzw. vor dem Setzen von src gesetzt werden. Hat der Abruf bereits begonnen, ändert eine spätere Zuweisung nichts mehr.
Keine Auswirkung auf die Ausführung: Die Ausführungsreihenfolge bleibt durch async/defer/type="module" bestimmt. Bei Inline-Skripten ohne src hat fetchPriority keine Wirkung.
Sparsam einsetzen: Setzt man zu viele Ressourcen auf "high", verliert der Hinweis seinen Nutzen und kann andere kritische Ressourcen (CSS, LCP-Bild) ausbremsen.
Kompatibilität: Unterstützt in Chromium ab 102, Safari ab 17.2 und Firefox ab 132. Ältere Browser ignorieren das Attribut. Eine Feature-Erkennung ist mit 'fetchPriority' in HTMLScriptElement.prototype möglich.
Die Schreibweise unterscheidet sich: das Attribut heißt fetchpriority (klein), die Eigenschaft fetchPriority (camelCase).

Siehe auch

HTMLScriptElement.integrity HTMLScriptElement.referrerPolicy HTMLScriptElement.crossOrigin HTMLScriptElement.textContent HTMLScriptElement.attributionSrc