LayoutShiftAttribution

Thuộc tính phiên bản

LayoutShiftAttribution.node Read only Experimental

Trả về phần tử đã bị dịch chuyển (null nếu đã bị xóa).

LayoutShiftAttribution.previousRect Read only Experimental

Trả về một đối tượng DOMRectReadOnly đại diện cho vị trí của phần tử trước khi dịch chuyển.

LayoutShiftAttribution.currentRect Read only Experimental

Trả về một đối tượng DOMRectReadOnly đại diện cho vị trí của phần tử sau khi dịch chuyển.

Phương thức phiên bản

LayoutShiftAttribution.toJSON() Experimental

Trả về biểu diễn JSON của đối tượng LayoutShiftAttribution.

Ví dụ

Ví dụ sau quan sát các dịch chuyển bố cục và xác định phần tử có tác động lớn nhất. Mảng sources được sắp xếp theo diện tích tác động theo thứ tự giảm dần, vì vậy phần tử đầu tiên (sources[0]) đại diện cho phần tử đóng góp nhiều nhất vào sự dịch chuyển bố cục. Để biết thêm chi tiết, xem Debug Web Vitals in the field.

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 });

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Debug layout shifts
• Debug Web Vitals in the field