LayoutShift: thuộc tính hadRecentInput

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Thuộc tính chỉ đọc hadRecentInput của giao diện LayoutShift trả về true nếu lastInputTime nhỏ hơn 500 mili giây trước.

Sự dịch chuyển bố cục chỉ là vấn đề nếu người dùng không mong đợi chúng, vì vậy các sự dịch chuyển bố cục là kết quả của tương tác người dùng (chẳng hạn như người dùng mở rộng phần tử UI) thường không được tính trong các chỉ số dịch chuyển bố cục. Thuộc tính hadRecentInput cho phép bạn loại trừ các sự dịch chuyển này.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });