PerformancePaintTiming

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformancePaintTiming.paintTime

Gibt den timestamp zurück, wann die Renderphase endete und die Paint-Phase begann.

PerformancePaintTiming.presentationTime

Gibt den timestamp zurück, wann die gemalten Pixel tatsächlich auf dem Bildschirm gezeichnet wurden.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, wobei sie sie qualifiziert und einschränkt, wie beschrieben:

PerformanceEntry.entryType

Gibt "paint" zurück.

PerformanceEntry.name

Gibt entweder "first-paint" oder "first-contentful-paint" zurück.

PerformanceEntry.startTime

Gibt den timestamp zurück, wann der Paint stattfand.

PerformanceEntry.duration

Gibt 0 zurück.

Instanz-Methoden

PerformancePaintTiming.toJSON()

Gibt eine JSON-Darstellung des PerformancePaintTiming-Objekts zurück.

Beispiele

Grundlegende Paint-Timings abrufen

Ein Beispiel mit einem PerformanceObserver, der benachrichtigt, wenn neue paint-Performance-Einträge in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers zuzugreifen.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

observer.observe({ type: "paint", buffered: true });

Ein Beispiel mit Performance.getEntriesByType(), das nur paint-Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Leistungstimeline des Browsers vorhanden sind:

const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
  // Logs "The time to first-paint was 386.7999999523163 milliseconds."
  // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});

Getrennte Paint- und Präsentationstiming abrufen

Die Eigenschaften paintTime und presentationTime ermöglichen es Ihnen, spezifische Zeitwerte für den Beginn der Paint-Phase und das Zeichnen der gemalten Pixel auf dem Bildschirm abzurufen. paintTime ist generell interoperabel, während presentationTime von der Implementierung abhängt.

Dieses Beispiel baut auf dem zuvor gezeigten Beispiel Performance.getEntriesByType() auf und zeigt, wie Sie die Unterstützung für paintTime und presentationTime überprüfen und diese Werte abrufen können, falls sie verfügbar sind. In nicht unterstützenden Browsern ruft der Code die loadTime ab.

const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  if (entry.presentationTime) {
    console.log(
      "paintTime:",
      entry.paintTime,
      "presentationTime:",
      entry.presentationTime,
    );
  } else if (entry.paintTime) {
    console.log("paintTime:", entry.paintTime);
  } else {
    console.log("loadTime", entry.loadTime);
  }
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• LargestContentfulPaint