PerformanceEventTiming: interactionId プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
読み取り専用の interactionId プロパティは、一連の関連イベントを発生させたユーザー操作を一意に識別する ID を返します。
解説
ユーザーがウェブページを操作するとき、ユーザー操作（例えばクリック）は通常 pointerdown、pointerup、click イベントなどの一連のイベントを発生させます。この一連のイベントの待ち時間を計測するために、イベントは同じ interactionId を共有します。
interactionId はそのユーザー操作に属する以下のイベント型に対してのみ計算されます。それ以外は 0 です。
| イベント型 | ユーザー操作 |
|---|---|
pointerdown, pointerup, click |
クリック / タップ / ドラッグ |
keydown, keyup |
キー押下 |
値
数値です。
例
interactionId の使用
次の例では、ある操作に対応するすべてのイベントの時間を収集しています。 eventLatencies マップを使用して、例えばユーザーの操作の最大時間を持つイベントを探すことができます。
js
// The key is the interaction ID.
let eventLatencies = {};
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.interactionId > 0) {
const interactionId = entry.interactionId;
if (!eventLatencies.has(interactionId)) {
eventLatencies[interactionId] = [];
}
eventLatencies[interactionId].push(entry.duration);
}
});
});
observer.observe({ type: "event", buffered: true });
// ユーザー操作の最大イベント再生時間でイベントをログ出力します
Object.entries(eventLatencies).forEach(([k, v]) => {
console.log(Math.max(...v));
});
仕様書
| Specification |
|---|
| Event Timing API # dom-performanceeventtiming-interactionid |
ブラウザーの互換性
Loading…