Signatur
Beschreibung
performance.timing.domInteractive liefert den Zeitpunkt als unsigned long long in Millisekunden seit der UNIX-Epoche. Gemessen wird der Moment, in dem der HTML-Parser mit dem Hauptdokument fertig ist und document.readyState auf "interactive" springt. Unmittelbar danach wird das Ereignis readystatechange ausgelöst.
Zu diesem Zeitpunkt steht der DOM-Baum schon vollständig. Unterressourcen wie Bilder, Stylesheets oder Iframes können aber noch laden. Auch aufgeschobene Skripte (defer) sind noch nicht ausgeführt, sie laufen erst vor domContentLoadedEventStart. Die Kennzahl zeigt also, wie schnell das Markup beim Browser ankommt und geparst wird. Sie sagt nichts darüber, wann die Seite für Nutzer wirklich bedienbar ist.
Die Eigenschaft gehört zum veralteten Interface PerformanceTiming aus Navigation Timing Level 1. Für neuen Code solltest du PerformanceNavigationTiming.domInteractive verwenden. Diesen Eintrag liefert performance.getEntriesByType("navigation"). Dort ist der Wert ein hochauflösender DOMHighResTimeStamp relativ zu performance.timeOrigin und keine absolute Epochenzeit.
Rückgabewert
readyState auf "interactive" gewechselt ist. Solange dieser Moment noch nicht erreicht ist, ist der Wert 0.Beispiele
Parse-Dauer seit Navigationsbeginn berechnen (veraltete API)
window.addEventListener('load', () => {
const t = performance.timing;
// Zeit vom Start der Navigation bis zum fertig geparsten DOM
const parseZeit = t.domInteractive - t.navigationStart;
console.log(`DOM interaktiv nach ${parseZeit} ms`);
});Moderne Alternative mit PerformanceNavigationTiming
window.addEventListener('load', () => {
const [nav] = performance.getEntriesByType('navigation');
if (!nav) return;
// Werte sind relativ zu performance.timeOrigin
console.log(`domInteractive: ${nav.domInteractive.toFixed(1)} ms`);
console.log(`Parsen nach erstem Byte: ${(nav.domInteractive - nav.responseStart).toFixed(1)} ms`);
});Mit Fallback messen und an Analytics senden
const messeDomInteractive = () => {
const [nav] = performance.getEntriesByType?.('navigation') ?? [];
if (nav) return nav.domInteractive;
// Fallback für sehr alte Browser
const t = performance.timing;
return t.domInteractive ? t.domInteractive - t.navigationStart : null;
};
window.addEventListener('load', () => {
const wert = messeDomInteractive();
if (wert !== null) {
navigator.sendBeacon('/metrics', JSON.stringify({ domInteractive: Math.round(wert) }));
console.log('gesendet:', Math.round(wert));
}
});// Wichtig · Fallstricke
- Veraltet:
performance.timingist deprecated. Die Browser unterstützen es zwar noch, in neuem Code solltest du aberPerformanceNavigationTimingnutzen. - Unterschiedliche Bezugspunkte: Der alte Wert ist eine absolute Epochenzeit. Der neue ist relativ zu
timeOrigin. Mische beide nicht ohne Umrechnung, wenn du Differenzen berechnest. - Wenn du die Eigenschaft zu früh abfragst, etwa in einem Inline-Skript im
<head>, ist der Wert noch0. Lies ihn deshalb erst nachloadaus. - Der Wert hängt stark von synchronen Skripten und blockierendem CSS ab. Er ist kein Maß für echte Interaktivität. Dafür eignen sich besser Kennzahlen wie INP oder Long Tasks.
- Die Genauigkeit ist auf ganze Millisekunden begrenzt. Browser können die Werte zusätzlich aus Datenschutzgründen vergröbern.