PerformancePaintTiming

Instanzeigenschaften

Dieses Interface 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 gezeichnet wurden.

Außerdem erweitert es 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 einfaches, JSON-serialisierbares Objekt zurück, das das PerformancePaintTiming-Objekt darstellt. Wird automatisch von JSON.stringify() aufgerufen.

Beispiele

Grundlegende Paint-Zeitpunkte ermitteln

Dieses Beispiel verwendet einen PerformanceObserver, der über neue paint-Performance-Einträge benachrichtigt, sobald sie in der Performance-Timeline des Browsers erfasst werden. Verwenden Sie die Option buffered, um auch auf Einträge zuzugreifen, 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 paint-Performance-Einträge an, die zum Zeitpunkt des Aufrufs in der Performance-Timeline 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."
});

Separate Zeitpunkte für Paint und Darstellung ermitteln

Mit den Eigenschaften paintTime und presentationTime können Sie die Zeitpunkte für den Beginn der Paint-Phase und für das Zeichnen der erzeugten Pixel auf dem Bildschirm getrennt abrufen. paintTime ist weitgehend interoperabel, während presentationTime von der Implementierung abhängt.

Dieses Beispiel baut auf dem vorherigen Beispiel mit Performance.getEntriesByType() auf. Es zeigt, wie Sie prüfen, ob paintTime und presentationTime unterstützt werden, und die Werte abrufen, falls 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