PerformancePaintTiming

Die PerformancePaintTiming-Schnittstelle bietet Zeitinformationen über "Paint"-Operationen (auch "Render"-Operationen genannt) während der Erstellung einer Webseite. "Paint" bezieht sich auf die Umwandlung des Render-Baums in die Pixel auf dem Bildschirm.

Diese API bietet zwei wichtige Paint-Momente:

  • Erster Paint (FP): Zeitpunkt, an dem irgendetwas gerendert wird. Beachten Sie, dass die Markierung des ersten Paint optional ist und nicht alle User-Agents es melden.
  • Erster inhaltsvoller Paint (FCP): Zeitpunkt, an dem das erste DOM-Text- oder Bildinhalt gerendert wird.

Ein dritter wichtiger Paint-Moment wird durch die LargestContentfulPaint-API bereitgestellt:

  • Größter inhaltsvoller Paint (LCP): Renderzeit des größten Bild- oder Textblocks, der innerhalb des Ansichtsfensters sichtbar ist, aufgezeichnet ab dem Zeitpunkt, an dem die Seite zu laden beginnt.

Die von dieser API bereitgestellten Daten helfen Ihnen, die Zeit zu minimieren, die Benutzer warten müssen, bevor sie sehen können, dass der Inhalt der Website zu erscheinen beginnt. Die Verringerung der Zeit bis zu diesen wichtigen Paint-Momenten lässt Websites reaktionsschneller, leistungsfähiger und ansprechender für Ihre Benutzer erscheinen.

Wie andere Performance-APIs erweitert diese API PerformanceEntry.

PerformanceEntry PerformancePaintTiming

Instanz-Eigenschaften

Diese Schnittstelle hat keine eigenen Eigenschaften, aber sie erweitert die folgenden PerformanceEntry-Eigenschaften, indem sie die Eigenschaften wie folgt qualifiziert 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 Zeitstempel zurück, zu dem das Paint aufgetreten ist.

PerformanceEntry.duration

Gibt 0 zurück.

Instanz-Methoden

Diese Schnittstelle hat keine Methoden.

Beispiele

Erhalten von Paint-Timings

Beispiel mit einem PerformanceObserver, der über neue paint Performance Einträge benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge zuzugreifen, die vor der Erstellung des Observers vorhanden sind.

js
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 der Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

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

Spezifikationen

Specification
Paint Timing
# sec-PerformancePaintTiming

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch