PerformancePaintTiming

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformancePaintTiming.paintTime

Gibt den timestamp zurück, wann die Rendering-Phase 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, indem es sie nachfolgend beschreibt und einschränkt:

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 das Paint erfolgt ist.

PerformanceEntry.duration

Gibt 0 zurück.

Instanz-Methoden

PerformancePaintTiming.toJSON()

Überschreibt die PerformanceEntry.toJSON()-Methode, um eine JSON-Repräsentation des PerformancePaintTiming-Objekts zurückzugeben.

Beispiele

Grundlegende Paint-Timings erhalten

Beispiel mit einem PerformanceObserver, der über neue paint-Performance-Einträge informiert, sobald sie in der Performance-Timeline des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge vor der Erstellung des Beobachters 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 });

Beispiel unter Verwendung von Performance.getEntriesByType(), das nur paint-Performance-Einträge anzeigt, die in der Performance-Timeline des Browsers vorhanden sind, wenn diese Methode aufgerufen wird:

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."
});

Separate Paint- und Präsentationszeitpunkte erhalten

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

Dieses Beispiel baut auf dem vorherigen Performance.getEntriesByType()-Beispiel auf und zeigt, wie Sie die Unterstützung für paintTime und presentationTime überprüfen und diese Werte abrufen können, wenn sie verfügbar sind. In nicht unterstützten 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