プログラミング

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

メールアドレスが公開されることはありません。

関連記事

JavaScript

WebSocket を使ったサンプルプログラムを作りました

目次1. はじめに2. スクリーンショット3. 動作4. 大まかな動作イメージ 1. はじめに WebSocket を使ったサンプルページを作りました。Node.js を使っています。 ソースコードは …

Web Workers API を使ったサンプル

Web Workers API を使ったサンプルページです。 目次1. デモページ2. 画面イメージ3. ソースコード4. 参考 1. デモページ デモページ 🔗 Web Worker …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

React Redux

React + Redux の最小限の雛形コード

この記事に載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素 …

WordPress

WordPress で処理を追加したい場合、どこにコードを書けばよいのか?

自分で導入した WordPress でブログを運営していたとします。ある日、WordPress の動作を変更したくなって 調べてみると、ほんの少し PHPのコードを書けば済むことが分かりました(アクシ …