プログラミング

Layout Instability API を使ってレイアウト・シフトを検出する

投稿日:2020年12月24日 更新日:

1. Layout Instability API について

Layout Instability API を使うと、レイアウト・シフトを検出することができます。

このAPIを使ったサンプルコードを紹介します。

※ この API を実装していないメジャーなブラウザもあるため、Chrome か Edge の利用をお勧めします(参考:LayoutShift API | Can I use…)。

2. サンプルコード

index.html 内の <script> タグに以下を記述します。

JavaScript

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry);
  }
}).observe({type: 'layout-shift', buffered: true});

実際にレイアウト・シフトが検出されると、こんな感じに出力されます。

結果の例
結果の例
  • LayoutShift オブジェクトの sources プロパティに、レイアウト・シフトによって動きのあった要素の情報 (LayoutShiftAttribution) が配列になって格納されています。どの要素なのか?は、LayoutShiftAttribution オブジェクトの node プロパティにセットされており、スクリーンショットにあるように、node のところに表示された h3, div, h2 といったHTMLタグの名前のところにカーソルを持っていくと、その上のページ画面上の対応する位置を色で教えてくれます。

任意のページで実行するには (Chromeの場合)

任意のページで上記のコードを実行したい場合は、Chrome DevTools を使って既存のJavaScriptコード(最初に実行されるコードがよいです)にブレークポイントを設定しておき、実際にブレークしたら Console タブで上記のコードを実行します。あとはJavaScriptコードの実行を再開するだけです。

3. インターフェイス情報

PerformanceObserver interface

callback PerformanceObserverCallback = undefined (PerformanceObserverEntryList entries,
                                             PerformanceObserver observer,
                                             optional boolean hasDroppedEntry = false);
[Exposed=(Window,Worker)]
interface PerformanceObserver {
  constructor(PerformanceObserverCallback callback);
  undefined observe (optional PerformanceObserverInit options = {});
  undefined disconnect ();
  PerformanceEntryList takeRecords();
  [SameObject] static readonly attribute FrozenArray supportedEntryTypes;
};

引用元:Performance Timeline Level 2

LayoutShift interface

[Exposed=Window]
interface LayoutShift : PerformanceEntry {
  readonly attribute double value;
  readonly attribute boolean hadRecentInput;
  readonly attribute DOMHighResTimeStamp lastInputTime;
  readonly attribute FrozenArray sources;
  [Default] object toJSON();
};

引用元:Layout Instability API

LayoutShiftAttribution interface

[Exposed=Window]
interface LayoutShiftAttribution {
  readonly attribute Node? node;
  readonly attribute DOMRectReadOnly previousRect;
  readonly attribute DOMRectReadOnly currentRect;
};

引用元:Layout Instability API

4. デモページ

5. 参考

仕様

MDN

対応方法

ブラウザの対応状況

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

e-Stat API を試しています。

最近、e-Stat 政府統計の総合窓口 というサイトの API機能 を試しています。 e-Stat というのは「政府統計のデータ」が閲覧できるサイトで、プログラムによってデータが取得できるように AP …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …

web development

User Timing API を使って、特定の処理に掛かった時間を計測する

目次1. User Timing API について2. サンプルコード3. デモページ4. 参考仕様MDNブラウザの対応状況 1. User Timing API について User Timing L …

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Web Components

Web Components の Slot について

Web Components の Slot について説明します。