PerformancePaintTiming

Instanzeigenschaften

Diese Schnittstelle definiert direkt die folgenden Eigenschaften:

PerformancePaintTiming.paintTime Schreibgeschützt

Gibt den timestamp zurück, zu dem die Rendering-Phase endete und die Paint-Phase begann.

PerformancePaintTiming.presentationTime Schreibgeschützt

Gibt den timestamp zurück, zu dem die erzeugten Pixel tatsächlich auf dem Bildschirm angezeigt wurden.

Sie erweitert außerdem die folgenden Eigenschaften von PerformanceEntry und legt deren Werte wie beschrieben fest:

PerformanceEntry.entryType Schreibgeschützt

Gibt "paint" zurück.

PerformanceEntry.name Schreibgeschützt

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

PerformanceEntry.startTime Schreibgeschützt

Gibt den timestamp zurück, zu dem der Paint-Vorgang stattfand.

PerformanceEntry.duration Schreibgeschützt

Gibt 0 zurück.

Instanzmethoden

PerformancePaintTiming.toJSON()

Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das PerformancePaintTiming-Objekt repräsentiert. Wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Grundlegende Paint-Zeiten abrufen

Dieses Beispiel verwendet einen PerformanceObserver, der über neue paint-Performance-Einträge informiert, sobald sie in der Performance-Zeitleiste des Browsers erfasst werden. Mit der Option buffered können Sie auch auf Einträge zugreifen, die vor der Erstellung des Observers erfasst wurden.

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

Dieses Beispiel verwendet Performance.getEntriesByType(). Die Methode zeigt nur die paint-Performance-Einträge an, die zum Zeitpunkt ihres Aufrufs in der Performance-Zeitleiste 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 Anzeigezeiten abrufen

Mit den Eigenschaften paintTime und presentationTime können Sie die Zeitpunkte abrufen, zu denen die Paint-Phase beginnt beziehungsweise die erzeugten Pixel auf dem Bildschirm angezeigt werden. paintTime wird browserübergreifend weitgehend unterstützt, während presentationTime von der Implementierung abhängt.

Dieses Beispiel baut auf dem vorherigen Beispiel mit Performance.getEntriesByType() auf. Es zeigt, wie Sie die Unterstützung für paintTime und presentationTime prüfen und die Werte abrufen, sofern sie verfügbar sind. In Browsern, die diese Eigenschaften nicht unterstützen, ruft der Code 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