5 JavaScript-APIs, die jeder Frontend-Entwickler kennen sollte

Die fünf nativen Browser-APIs, die sich derzeit am meisten lohnen zu erlernen, sind IntersectionObserver, ResizeObserver, AbortController, die Clipboard API und die View Transitions API: Jede ersetzt eine gängige externe Abhängigkeit durch ein Plattform-Primitive, das in jedem aktuellen Browser verfügbar ist.

Die meisten von uns lernen das auf die harte Tour – man bindet eine ganze Bibliothek für einen Kopieren-Button ein oder verliert einen Nachmittag an ein Suchfeld, das immer wieder veraltete Ergebnisse anzeigt, nur um später festzustellen, dass der Browser die Lösung längst mitgeliefert hatte. Wer bereits fetch, localStorage und das DOM nutzt, aber die neueren Observer- und Utility-APIs noch nicht angetastet hat, findet hier die Kurzliste, mit der sich die eine oder andere Bibliothek streichen lässt. Alles im Folgenden ist eine native Web-Plattform-API, kein gehosteter REST-Dienst wie TMDB oder Unsplash – es gibt keinen API-Key, keinen Server und keine Laufzeitkosten über den Browser hinaus, den man ohnehin als Zielplattform hat. Jeder Eintrag enthält eine einzeilige Definition, ein minimales, lauffähiges Code-Beispiel, einen realen Anwendungsfall und einen ehrlichen Hinweis zur Browser-Unterstützung.

IntersectionObserver: die Web-API, die Scroll-Listener ersetzt

IntersectionObserver meldet asynchron, wenn ein Zielelement den Viewport (oder einen beliebigen Vorfahren-Container) betritt oder verlässt. Damit lassen sich Lazy-Loading, Infinite Scroll und Sichtbarkeits-Analytics umsetzen – ganz ohne einen einzigen Scroll-Listener. Die API ist seit März 2019 browserübergreifend als Baseline verfügbar. Scroll-Listener feuern dutzende Male pro Sekunde auf dem Main Thread und zwingen dazu, die Geometrie selbst zu berechnen; der Observer bündelt diese Arbeit außerhalb des kritischen Pfads und ruft den Callback nur auf, wenn sich die Sichtbarkeit tatsächlich ändert.

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src; // load only when visible
      observer.unobserve(entry.target);
    }
  }
});

document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

Dieses Beispiel lädt Bilder lazy, sobald die jeweilige Zeile in den sichtbaren Bereich scrollt. Dieselbe isIntersecting-Prüfung steuert auch Infinite-Scroll-Sentinels und „Gesehen”-Analytics. Session-Replays langer Feeds machen den Vorteil deutlich sichtbar: Bilder außerhalb des Viewports und Tracking-Events werden erst aufgelöst, wenn ihre Zeile in den Viewport eintritt – nicht alle auf einmal beim Laden. Die API ersetzt react-intersection-observer und manuell berechnete Scroll-Mathematik in den meisten Anwendungsfällen. (Hinweis: Die Option trackVisibility ist noch experimentell und kein Baseline-Feature. Es empfiehlt sich, bei isIntersecting zu bleiben.)

ResizeObserver: Größenänderungen auf Element-Ebene erkennen

ResizeObserver sollte immer dann dem resize-Event des Fensters vorgezogen werden, wenn eine Komponente auf ihre eigene Größe reagieren muss: Die API meldet Änderungen der Content-Box und Border-Box auf Element-Ebene – genau das, was containerabhängige Komponenten erst möglich macht. Ein window.resize-Handler teilt lediglich mit, dass sich der Viewport verändert hat; er sagt nichts darüber aus, ob ein Panel kleiner geworden ist, weil eine Seitenleiste geöffnet wurde.

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width } = entry.contentRect;
    entry.target.classList.toggle('is-narrow', width < 400);
  }
});

ro.observe(document.querySelector('.card'));

In diesem Beispiel wechselt die Karte basierend auf ihrer eigenen Breite in ein kompaktes Layout – eine Container Query in JavaScript. Die API ist browserübergreifend als Baseline verfügbar und ersetzt Bibliotheken wie element-resize-detector. Erscheint in der Konsole die Warnung ResizeObserver loop, ist diese in den meisten Fällen harmlos und bedeutet, dass innerhalb des Callbacks die Größe verändert wurde.

AbortController: Fetches abbrechen und Race Conditions beheben

AbortController ist die Standardlösung für Race Conditions in React: controller.signal an fetch übergeben, controller.abort() im Effect-Cleanup aufrufen – und eine veraltete Antwort kann die aktuelle Benutzeroberfläche nach einer schnellen Neunavigation nie mehr überschreiben. AbortSignal ist seit April 2018 browserübergreifend verfügbar.

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/results?q=${query}`, { signal: controller.signal })
    .then((res) => res.json())
    .then(setResults)
    .catch((err) => {
      if (err.name !== 'AbortError') throw err;
    });
  return () => controller.abort(); // cancel on unmount or new query
}, [query]);

Der klassische Bug, den dies beseitigt, lässt sich in Session-Replays eindrücklich beobachten: Ein Nutzer tippt schnell, eine frühere, langsame Antwort trifft zuletzt ein und überschreibt die aktuelle Ansicht mit veralteten Daten. Das Abbrechen des laufenden Requests im Cleanup macht das unmöglich. Für reine Timeouts lässt sich der manuelle Controller übrigens weglassen. AbortSignal.timeout() ist seit April 2024 browserübergreifend verfügbar und bricht mit einem TimeoutError ab, während ein nutzerseitig ausgelöster Abbruch einen AbortError wirft – ein einziger catch-Block kann beide unterscheiden:

fetch(url, { signal: AbortSignal.timeout(5000) });

Diese API ersetzt isMounted-Flags und axios.CancelToken.

Clipboard API: Kopieren in die Zwischenablage ohne den execCommand-Hack

navigator.clipboard.writeText() ist der moderne, Promise-basierte Ersatz für den document.execCommand('copy')-Hack. Zu beachten ist, dass die API ausschließlich in einem sicheren Kontext (HTTPS oder localhost) funktioniert.

copyBtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(snippet);
  copyBtn.textContent = 'Copied!';
});

Dies ist der „Code-Snippet kopieren”-Button, den man auf jeder Dokumentationsseite findet. Das Schreiben in die Zwischenablage ist Baseline und zuverlässig; das Lesen ist als Best-Effort zu betrachten. readText() löst mit einem leeren String auf, wenn die Zwischenablage keinen Text enthält, und Firefox schränkt den Lesezugriff stärker ein als das Schreiben – daher ist das Kopieren der verlässliche Weg, während das Lesen aus der Zwischenablage als Progressive Enhancement behandelt werden sollte. Die API ersetzt clipboard.js.

View Transitions API: DOM-Zustandswechsel nativ animieren

View Transitions animieren Übergänge zwischen DOM-Zuständen mit document.startViewTransition(() => updateDOM()). Da die API graceful degradiert – in nicht unterstützten Browsern wird das DOM ohne Animation aktualisiert – lässt sie sich heute sicher hinter einer if (document.startViewTransition)-Abfrage ausliefern. Same-Document-Transitions haben am 14. Oktober 2025 den Status „Baseline Newly available” erreicht und funktionieren in Chrome 111+, Edge 111+, Firefox 144+ und Safari 18+.

function updatePage(newContent) {
  if (!document.startViewTransition) {
    render(newContent); // fallback: instant update, no animation
    return;
  }
  document.startViewTransition(() => render(newContent));
}

Einsatzgebiete sind Tab-Wechsel, Listen-zu-Detail-Navigationen und Filteränderungen – also die Crossfades und Shared-Element-Morphs, für die man sonst Framer Motion einbinden würde. Die startViewTransition()-Abfrage stellt sicher, dass nicht unterstützte Browser die Änderung einfach sofort anwenden. Hinweis: Cross-Document-Transitions haben eine engere Unterstützung – Chrome 126+, Edge 126+ und Safari 18.2+, jedoch noch kein Firefox-Support – die beiden Varianten sollten daher nicht verwechselt werden.

Bonus-APIs: structuredClone und ein wichtiger fetch-Hinweis

Am besten beim nächsten Ticket eine dieser APIs ausprobieren und die Abhängigkeit ersetzen, die sie ablöst: einen Scroll-Listener durch IntersectionObserver ersetzen oder einen Such-Fetch in einen AbortController einwickeln. Ein weiterer erwähnenswerter Kandidat: structuredClone() kopiert Objekte tief, ohne den Umweg über JSON.parse(JSON.stringify(...)), und erhält dabei Dates, Maps, Sets und Typed Arrays – wirft jedoch einen DataCloneError bei Funktionen und DOM-Knoten, ist also für Daten gedacht, nicht für Live-Objekte (Baseline seit März 2022). Und wer fetch als Grundlage nutzt, sollte nicht vergessen, dass dessen Promise bei HTTP 404 oder 500 nicht rejected – nur bei Netzwerkfehlern. response.ok muss daher selbst geprüft werden.

Häufig gestellte Fragen

Was ist der Unterschied zwischen IntersectionObserver und ResizeObserver?

IntersectionObserver meldet, wenn ein Element den Viewport oder einen Vorfahren-Container betritt oder verlässt – er steuert damit Lazy-Loading, Infinite Scroll und Sichtbarkeits-Analytics. ResizeObserver meldet Änderungen an den Content-Box- oder Border-Box-Abmessungen eines Elements selbst – er steuert damit containerabhängige Layouts. IntersectionObserver beantwortet die Frage „Ist dieses Element sichtbar?“, ResizeObserver beantwortet „Wie groß ist dieses Element?“. Unterschiedliche Fragen – und keiner der beiden ersetzt die Rolle des window-resize-Events auf Viewport-Ebene.

Sollte ich AbortSignal.timeout() oder einen manuellen AbortController zum Abbrechen von fetch-Requests verwenden?

AbortSignal.timeout() empfiehlt sich, wenn nur ein fester Timeout benötigt wird: Er bricht nach der angegebenen Millisekunden-Anzahl automatisch mit einem TimeoutError ab und erfordert keine Controller-Variable. Ein manueller AbortController ist sinnvoll, wenn der Abbruch durch ein selbst kontrolliertes Ereignis ausgelöst wird – etwa beim React-Effect-Cleanup beim Unmount oder bei einer Neunavigation, wo controller.abort() selbst aufgerufen wird. Beide werfen unterschiedliche Fehler – TimeoutError bzw. AbortError –, sodass ein einziger catch-Block sie unterscheiden kann.

Warum schlägt navigator.clipboard.writeText() auf meiner lokalen Entwicklungsseite fehl?

navigator.clipboard.writeText() funktioniert ausschließlich in einem sicheren Kontext, also unter HTTPS oder localhost. Wird auf einen Dev-Server über eine einfache HTTP-Adresse zugegriffen – etwa eine lokale IP oder ein Nicht-localhost-Hostname –, blockiert der Browser Schreibzugriffe auf die Zwischenablage und das Promise wird rejected. Die Lösung: localhost verwenden oder HTTPS einrichten. Das Lesen mit readText() ist noch stärker eingeschränkt, insbesondere in Firefox – daher sollte das Schreiben als der zuverlässige Weg behandelt und das Lesen aus der Zwischenablage als Progressive Enhancement betrachtet werden.

Ist die View Transitions API sicher zu verwenden, wenn einige Browser sie nicht unterstützen?

Ja, da sie graceful degradiert. Der Aufruf sollte mit `if (document.startViewTransition)` abgesichert werden, bevor er ausgeführt wird. In Browsern ohne Unterstützung wird das DOM-Update dennoch ausgeführt – nur ohne Animation, also sofort. Same-Document-Transitions haben am 14. Oktober 2025 den Status „Baseline Newly available“ in Chrome 111+, Edge 111+, Firefox 144+ und Safari 18+ erreicht. Cross-Document-Transitions haben eine engere Unterstützung: Chrome 126+, Edge 126+ und Safari 18.2+ – Firefox unterstützt sie noch nicht.