1. このページの目的
2. Demo
a. 2秒後に画像を挿入することにより、レイアウトシフトを起こす。
DevTools の Console パネルにレイアウトシフトの情報が表示される。
⬅ DOMContentLoadedイベントで読み込んだ画像
⬅ loadイベントから2秒後に読み込んだ画像
b. 本ページで実行するソースコード（抜粋）
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry);
}
});
observer.observe({type: 'layout-shift', buffered: true});
3. 結果
- 2つの
LayoutShiftオブジェクトが検出された。1つの場合もある。 sourcesプロパティに、LayoutShiftAttributionオブジェクトがセットされるのだが、これが「シフトされた要素」を表している。LayoutShiftAttributionオブジェクトのnodeプロパティにはシフトされた要素がセットされている。また、previousRectプロパティはシフト前の位置を表し、currentRectプロパティはシフト後の位置を表す。
4. 参考情報
LayoutShift interface,
[Exposed=Window]
interface LayoutShift : PerformanceEntry {
readonly attribute double value;
readonly attribute boolean hadRecentInput;
readonly attribute DOMHighResTimeStamp lastInputTime;
readonly attribute FrozenArray<LayoutShiftAttribution> sources;
[Default] object toJSON();
};
LayoutShiftAttribution interface
[Exposed=Window]
interface LayoutShiftAttribution {
readonly attribute Node? node;
readonly attribute DOMRectReadOnly previousRect;
readonly attribute DOMRectReadOnly currentRect;
};