PerformancePaintTiming

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformancePaintTiming.paintTime

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

PerformancePaintTiming.presentationTime

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

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

PerformanceEntry.entryType

Gibt "paint" zurück.

PerformanceEntry.name

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

PerformanceEntry.startTime

Gibt den Zeitstempel zurück, zu dem das Paint erfolgte.

PerformanceEntry.duration

Gibt 0 zurück.

Instanz-Methoden

PerformancePaintTiming.toJSON()

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

Beispiele

Grundlegende Paint-Timings abrufen

Beispiel mit einem PerformanceObserver, der über neue paint Performance-Einträge benachrichtigt, während sie in der Performance-Zeitleiste des Browsers erfasst werden. Verwenden Sie die buffered Option, um auf Einträge zuzugreifen, die vor der Erstellung des Beobachters vorhanden waren.

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 mit Performance.getEntriesByType(), das nur paint Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode 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."
});

Separate Paint- und Präsentationstiming abrufen

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 zu erfassen. Die paintTime ist weitgehend interoperabel, während die presentationTime implementationsabhängig ist.

Dieses Beispiel baut auf dem früheren Beispiel Performance.getEntriesByType() auf und zeigt, wie Sie prüfen können, ob paintTime und presentationTime unterstützt werden und diese Werte abrufen, wenn 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