LayoutShiftAttribution
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Schnittstelle LayoutShiftAttribution liefert Informationen zur Fehlersuche bei Elementen, deren Position sich verschoben hat.
Instanzen von LayoutShiftAttribution werden beim Aufruf von LayoutShift.sources in einem Array zurückgegeben.
Instanzeigenschaften
LayoutShiftAttribution.nodeSchreibgeschützt-
Gibt das Element zurück, dessen Position sich verschoben hat (
null, wenn es entfernt wurde). LayoutShiftAttribution.previousRectSchreibgeschützt-
Gibt ein
DOMRectReadOnly-Objekt zurück, das die Position des Elements vor der Verschiebung darstellt. LayoutShiftAttribution.currentRectSchreibgeschützt-
Gibt ein
DOMRectReadOnly-Objekt zurück, das die Position des Elements nach der Verschiebung darstellt.
Instanzmethoden
LayoutShiftAttribution.toJSON()-
Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das
LayoutShiftAttribution-Objekt darstellt. Wird vonJSON.stringify()automatisch aufgerufen.
Beispiele
Das folgende Beispiel beobachtet Layoutverschiebungen und identifiziert das Element mit dem größten Einfluss. Das Array sources ist nach der betroffenen Fläche absteigend sortiert – das erste Element (sources[0]) steht also für das Element, das am stärksten zur Layoutverschiebung beigetragen hat. Weitere Informationen dazu finden Sie unter Web Vitals im produktiven Einsatz debuggen.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.sources || entry.sources.length === 0) continue;
const mostImpactfulSource = entry.sources[0];
console.log("Layout shift score:", entry.value);
console.log("Most impactful element:", largestShiftSource.node);
console.log("Previous position:", largestShiftSource.previousRect);
console.log("Current position:", largestShiftSource.currentRect);
}
});
observer.observe({ type: "layout-shift", buffered: true });
Spezifikationen
| Spezifikation |
|---|
| Layout Instability API # sec-layout-shift-attribution |