PerformanceResourceTiming.initiatorType — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.initiatorType

Beschreibung

Die Eigenschaft initiatorType eines PerformanceResourceTiming-Eintrags zeigt, wodurch eine Ressource angefordert wurde. Ihr Wert ist eine kleingeschriebene Zeichenkette, zum Beispiel "img", "script", "link", "css", "fetch", "xmlhttprequest", "beacon", "iframe", "video", "audio", "navigation" oder "other".

Die Zuordnung funktioniert so:

Wurde die Ressource über ein HTML-Element angefordert, steht dort der lokale Name des Elements (img, script, link, input, object …).
Kam die Anforderung aus CSS (url(), @import, Web-Fonts), lautet der Wert "css".
Bei Anfragen per fetch(), XMLHttpRequest oder navigator.sendBeacon() steht dort "fetch", "xmlhttprequest" bzw. "beacon".
Beim Hauptdokument (PerformanceNavigationTiming) ist der Wert "navigation".

In der Praxis braucht man initiatorType für Real-User-Monitoring (RUM) und Performance-Analysen: Ladezeiten und Übertragungsgrößen lassen sich damit nach Ressourcentyp gruppieren, etwa um langsame Bilder, blockierende Skripte oder viele API-Aufrufe zu finden. Zu beachten ist, dass der Wert den Auslöser der Anfrage beschreibt und nicht den Inhaltstyp: Ein per fetch() geladenes Bild hat den Wert "fetch", nicht "img".

Rückgabewert

Typ

string

Beschreibung

Kleingeschriebene Zeichenkette mit dem Auslöser der Anfrage, z. B. "img", "script", "css", "fetch", "xmlhttprequest", "navigation" oder "other".

Beispiele

Alle geladenen Ressourcen mit Auslöser auflisten

const entries = performance.getEntriesByType('resource');

for (const entry of entries) {
  console.log(`${entry.initiatorType.padEnd(15)} ${Math.round(entry.duration)} ms  ${entry.name}`);
}

script 42 ms https://example.com/app.js link 18 ms https://example.com/styles.css css 25 ms https://example.com/fonts/inter.woff2 img 63 ms https://example.com/hero.jpg fetch 120 ms https://example.com/api/user

Ladezeit und Übertragungsgröße nach Typ gruppieren

const stats = performance
  .getEntriesByType('resource')
  .reduce((acc, { initiatorType, duration, transferSize }) => {
    const s = (acc[initiatorType] ??= { anzahl: 0, dauerMs: 0, bytes: 0 });
    s.anzahl += 1;
    s.dauerMs += Math.round(duration);
    s.bytes += transferSize;
    return acc;
  }, {});

console.table(stats);

┌─────────┬────────┬─────────┬────────┐ │ (index) │ anzahl │ dauerMs │ bytes │ ├─────────┼────────┼─────────┼────────┤ │ script │ 4 │ 210 │ 184233 │ │ img │ 12 │ 540 │ 902114 │ │ fetch │ 3 │ 360 │ 5120 │ └─────────┴────────┴─────────┴────────┘

Langsame API-Aufrufe live mit PerformanceObserver erkennen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const istApi = entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest';
    if (istApi && entry.duration > 500) {
      console.warn(`Langsamer API-Aufruf (${Math.round(entry.duration)} ms): ${entry.name}`);
    }
  }
});

observer.observe({ type: 'resource', buffered: true });

// Testaufruf
await fetch('/api/reports?jahr=2024');

Langsamer API-Aufruf (812 ms): https://example.com/api/reports?jahr=2024

// Wichtig · Fallstricke

Auslöser, nicht Inhaltstyp: initiatorType sagt nichts über den MIME-Typ aus. Ein Bild per fetch() ergibt "fetch", ein Stylesheet per <link rel="stylesheet"> ergibt "link", eine darin referenzierte Schrift aber "css". Wer den Inhaltstyp braucht, kann die Dateiendung in entry.name auswerten oder in neueren Chromium-Versionen contentType nutzen.
Uneinheitliche Werte: Je nach Browser und Version können Ressourcen unterschiedlich zugeordnet werden (z. B. "other" statt eines konkreten Werts, oder "link" bei preload). Für Auswertungen besser eine Standard-Kategorie für unbekannte Werte vorsehen.
Puffergröße: Der Resource-Timing-Puffer umfasst standardmäßig nur etwa 250 Einträge. Bei vielen Ressourcen performance.setResourceTimingBufferSize() erhöhen oder einen PerformanceObserver nutzen.
Cross-Origin: initiatorType ist auch bei fremden Ursprüngen verfügbar, detaillierte Zeitwerte und Größen (transferSize usw.) jedoch nur mit dem Header Timing-Allow-Origin.
Kompatibilität: Wird in allen modernen Browsern und in Node.js (ab 18 über perf_hooks, dort bei fetch als "fetch") unterstützt.

Siehe auch

PerformanceObserver.supportedEntryTypes PerformanceResourceTiming.contentType PerformanceResourceTiming.deliveryType PerformanceResourceTiming.fetchStart PerformanceResourceTiming.connectStart