LargestContentfulPaint: renderTime Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die renderTime
-Eigenschaft des LargestContentfulPaint
-Interfaces ist eine schreibgeschützte Eigenschaft, die den Zeitpunkt darstellt, zu dem das Element auf dem Bildschirm gerendert wurde.
Wert
Die renderTime
-Eigenschaft kann folgende Werte annehmen:
- Ein
timestamp
, der den Zeitpunkt in Millisekunden darstellt, zu dem das Element auf dem Bildschirm gerendert wurde. 0
oder ein groberertimestamp
, wenn die Ressource eine Cross-Origin-Anfrage ist und keinTiming-Allow-Origin
HTTP-Antwort-Header verwendet wird.
Renderzeit für Cross-Origin-Bilder
Aus Sicherheitsgründen war der Wert der renderTime
-Eigenschaft ursprünglich 0
, wenn die Ressource eine Cross-Origin-Anfrage ist.
Browser könnten jetzt eine leicht geraue Renderzeit in diesen Situationen offenlegen. Überprüfen Sie die Browser-Unterstützung.
Um genauere Informationen zur Cross-Origin-Renderzeit offenzulegen, muss der Timing-Allow-Origin
HTTP-Antwort-Header gesetzt werden.
Beispielsweise sollte die Cross-Origin-Ressource, um https://developer.mozilla.org
zu erlauben, eine genaue renderTime
zu sehen, Folgendes senden:
Timing-Allow-Origin: https://developer.mozilla.org
Verwenden Sie startTime
über renderTime
Unabhängig von der Genauigkeit der renderTime
sollten Entwickler startTime
über renderTime
als LCP-Zeit verwenden. Dies gibt den Wert der renderTime
des Eintrags zurück, wenn dieser nicht 0
ist, und ansonsten den Wert der loadTime
dieses Eintrags, sodass die Notwendigkeit entfällt, auf 0-Werte für nicht unterstützende Browser zu prüfen.
Beispiele
>Protokollierung der renderTime des largest contentful paint
Dieses Beispiel verwendet einen PerformanceObserver
, der über neue largest-contentful-paint
-Performanceeinträge benachrichtigt, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Die buffered
-Option wird verwendet, um auf Einträge vor der Erstellung des Observers zuzugreifen.
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
Spezifikationen
Specification |
---|
Largest Contentful Paint> # ref-for-dom-largestcontentfulpaint-rendertime> |
Browser-Kompatibilität
Loading…