SVGScriptElement.async — Eigenschaft · JavaScript-Referenz

Signatur

SVGScriptElement.async

Beschreibung

Die Eigenschaft async des Interfaces SVGScriptElement gibt an, ob ein externes Skript, das über ein SVG-<script>-Element (mit href) eingebunden ist, asynchron ausgeführt werden soll. Ist der Wert true, lädt der Browser das Skript parallel zum Parsen des Dokuments herunter. Sobald es verfügbar ist, führt er es aus, ohne auf andere Skripte oder das Ende des Parsens zu warten.

Die Eigenschaft funktioniert wie HTMLScriptElement.async: Beim Lesen erhältst du einen booleschen Wert. Setzt du sie, wird das Inhaltsattribut async hinzugefügt (true) oder entfernt (false). Interessant ist das vor allem, wenn du Skripte in Inline-SVG oder eigenständigen SVG-Dokumenten dynamisch mit document.createElementNS() erzeugst und dabei die Ladereihenfolge steuern willst.

Nimm async für unabhängige Skripte wie Analyse-Code, Widgets oder Animationshelfer, die weder von anderen Skripten noch von einer festen Ausführungsreihenfolge abhängen. Brauchst du eine feste Reihenfolge, setze async auf false oder verwende defer, sofern der Browser das unterstützt.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false (bei per Markup notierten Skripten)	Nur beim Setzen: `true` fügt das `async`-Attribut hinzu, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Unterstützung prüfen und Wert auslesen

// <svg><script id="svgScript" href="tracker.js" async></script></svg>
const script = document.getElementById('svgScript');

if ('async' in script) {
  console.log('async unterstützt:', script.async);
} else {
  console.log('SVGScriptElement.async wird nicht unterstützt');
}

async unterstützt: true

Externes Skript dynamisch in ein Inline-SVG laden

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const loadSvgScript = (url, { async = true } = {}) =>
  new Promise((resolve, reject) => {
    const script = document.createElementNS(SVG_NS, 'script');
    script.setAttribute('href', url);
    script.async = async; // Ausführungsverhalten festlegen
    script.addEventListener('load', () => resolve(script));
    script.addEventListener('error', () => reject(new Error(`Fehler beim Laden: ${url}`)));
    svg.appendChild(script);
  });

const init = async () => {
  const s = await loadSvgScript('/js/chart-animation.js');
  console.log('Geladen, async =', s.async);
};
init();

Geladen, async = true

Reihenfolge erzwingen: async abschalten

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

// lib.js muss vor app.js laufen
['/js/lib.js', '/js/app.js'].forEach((url) => {
  const script = document.createElementNS(SVG_NS, 'script');
  script.setAttribute('href', url);
  script.async = false; // Ausführung in Einfügereihenfolge
  svg.appendChild(script);
});

console.log(svg.querySelector('script').hasAttribute('async'));

false

// Wichtig · Fallstricke

Kompatibilität: SVGScriptElement.async wird nicht von allen Browsern unterstützt. Prüfe das mit 'async' in scriptElement. Fehlt die Eigenschaft, hat das Setzen von el.async = true keine Wirkung, weil nur eine gewöhnliche JavaScript-Eigenschaft entsteht. In diesem Fall kannst du auf setAttribute('async', '') ausweichen, das Verhalten ist aber nicht garantiert.
Nur für externe Skripte: Bei Inline-Skripten ohne href hat async keine Wirkung.
Keine Ausführungsreihenfolge: Mehrere async-Skripte laufen in der Reihenfolge, in der sie fertig geladen sind, nicht in der Reihenfolge im Dokument. Hängen Skripte voneinander ab, führt das zu Race Conditions.
Dynamisch erzeugte Skripte: Bei HTML-Skripten sind per JavaScript eingefügte Skripte standardmäßig asynchron. Setze async immer ausdrücklich, damit das Verhalten in allen Browsern gleich ist.
Sicherheit: Skripte in SVG unterliegen der Content-Security-Policy (script-src). In SVG-Dateien, die über <img> oder CSS eingebunden sind, werden Skripte grundsätzlich nicht ausgeführt.

Siehe auch

SVGScriptElement SVGScriptElement.defer SVGScriptElement.type HTMLScriptElement.async Document.createElementNS() HTMLScriptElement.innerText HTMLUListElement.compact