ソフトナビゲーションとインタラクション・コンテンツフル・ペイント

コミュニティグループ報告書草案,

このバージョン:
https://wicg.github.io/soft-navigations/
テストスイート:
https://github.com/web-platform-tests/wpt/tree/master/soft-navigation-heuristics
課題追跡:
GitHub
仕様内インライン
編集者:
(Google)
(Google)
以前の編集者:
(Shopify)

概要

この文書は、ウェブページ作者が同一文書内(「ソフト」)ナビゲーションを検出し、 その後のページ変更とコンテンツフル・ペイントを、それらを引き起こしたユーザーインタラクションへ 帰属させるために使用できる一連のAPIを定義します。

この文書のステータス

この仕様は、Web Platform Incubator Community Groupによって公開されました。 これはW3C標準ではなく、W3C標準トラック上にもありません。 次の点に注意してください。 W3C Community Contributor License Agreement (CLA) の下では、限定的なオプトアウトがあり、その他の条件が適用されます。 詳細については、 W3C Community and Business Groupsを参照してください。

1. 序論

この節は非規範的です。

現代のウェブアプリケーションは、多くの場合、完全なページナビゲーションを 実行することなく、ユーザーインタラクションに応じてコンテンツを動的に更新します。 これらのインタラクションによって開始される効果—構造的な DOM 変更、コンテンツフル・ペイント、履歴状態の変更など—は、従来、 測定し、正しいユーザー操作に帰属させることが困難でした。

典型的な Single Page Application のパターンを考えてみます。ユーザーが商品リンクをクリックすると、 click イベントハンドラーが起動されます。このハンドラーは商品の詳細を取得するためのネットワーク fetch() を開始します。 応答が到着すると、コールバックが実行され、新しいコンテンツを DOM に動的に挿入し、 History または Navigation API を使用して URL を更新します。これはユーザーには ナビゲーションのように見えますが、Largest Contentful Paint (LCP) ([LARGEST-CONTENTFUL-PAINT]) のような既存の指標は 初回ページ読み込みのみを測定し、Interaction to Next Paint (INP) はクリック自体の直後の 視覚的フィードバックのみを測定するため、その後に発生する重要なレンダリングや「ソフト」 ナビゲーションは捕捉されません。

この仕様は、[EVENT-TIMING] API を活用してインタラクションを定義し、 [ASYNC-CONTEXT] 提案を用いて非同期タスク境界をまたいだ因果関係を追跡し、変更された DOM ノードをインタラクションに対応付けることで、それらを引き起こしたインタラクションへの コンテンツフル・ペイントの帰属を可能にします。この仕様は、ブラウザーが「ソフトナビゲーション」を含む これらの効果を識別し報告する方法を定義し、[PAINT-TIMING] および [LARGEST-CONTENTFUL-PAINT] と統合して、レンダリングの変更を パフォーマンスタイムラインに帰属させます。

2. Performance Timeline のスライシング

この節は非規範的である。

性能指標(イベントタイミング、レイアウトシフト、リソース読み込み、または 長いアニメーションフレームなど)を、それらの起点となるナビゲーションに帰属させるため、 performance timeline は、navigationId 属性を PerformanceEntry 上で用いて セグメントに分割される。

時間にまたがる遷移の正確なスライス点を決定することは複雑である。一貫した 帰属を確保するため、この仕様は、URL の変更があるたびに timeline を ただちにスライスするのではなく、遷移を ソフトナビゲーション が performance timeline に発行される準備が整うまで遅延させるモデルを採用する。

設計上のトレードオフ、帰属規則、およびエッジケースの詳細な議論については、 [PERFORMANCE-TIMELINE] issue の コメントを参照のこと。

2.1. ナビゲーション ID

navigation id は、 global object の存続期間内において各ナビゲーション(ハードおよび ソフトの両方)に割り当てられる一意の識別子である。

Window は、以下を持つ。

注: initial navigation id valuenavigation id increment は、 navigationId 値を計算するために用いられる( increment the current navigation id を参照)。 これにより、開発者がそれをナビゲーションの正確な回数を数えるために利用したり、 それが 0 から始まると仮定したりすることを抑止する。 ユーザーエージェントは、異なる Window オブジェクト間で共有されるグローバルなナビゲーション値を用いないことが期待される。これは クロスオリジン漏えいを防ぐためである。

Window window が与えられたとき、 increment the current navigation id するには、次を実行する。
  1. windownavigation count を、windownavigation count に 1 を加えた値に設定する。

  2. newId を、windowinitial navigation id value に、 (windownavigation countwindownavigation id increment の積)を加えた値とする。

  3. windowcurrent navigation idnewId に設定する。

2.2. PerformanceEntry 拡張

[Exposed=(Window,Worker)]
partial interface PerformanceEntry {
    readonly attribute unsigned long long navigationId;
};
PerformanceEntry は、関連付けられた navigation id を持つ。 これは 64-bit unsigned integer であり、初期値は 0 である。

navigationId 属性の getter は、thisnavigation id を返さなければならない。

2.3. Performance Timeline との統合

queue a PerformanceEntry において、手順 1(entry の初期化)の後に、 以下の手順を追加する。

  1. newEntrynavigation id が 0 である場合:

    1. globalWindow オブジェクトである場合:

      1. newEntrynavigation id を、 globalcurrent navigation id に設定する。

3. インタラクション基盤

3.1. Interaction Context の導入

ソフトナビゲーションの検出は、タスクの因果関係を追跡し、特定の操作(例: DOM ノードの追加)が 特定のユーザーインタラクションによって引き起こされたことを観測できる能力に依存する。

この仕様は、この伝播を処理するために TC39 の [ASYNC-CONTEXT] 提案を活用する。すべての 新しいユーザーインタラクション(Event Timing によって定義されるもの)または関連するナビゲーションイベントは、 新しい InteractionContext を作成する。この context は、隠された内部専用の AsyncContext.Variable[[ActiveInteractionContext]] と表記される)に格納される。

Web プラットフォームの AsyncContext との統合により、この変数は非同期の継続 (例: setTimeoutfetchawait)に自動的に 付加され、ブラウザーが 後続の効果を元のインタラクションに帰属させることを可能にする。

スクリプト伝播に加えて、この仕様は、DOM を変更するユーザー操作が、操作に関連付けられた変更済みノードの集合を 確立する方法を定義し、 非同期スクリプトが現在実行されていない場合でも、コンテンツのあるペイントなどの後続のレンダリング効果を、 それを開始した操作コンテキストまでたどれるようにします。

3.2. InteractionContext 構造体

InteractionContext は、単一の操作からソフト ナビゲーションを検出するために必要なデータを保持するために使用される 構造体 である。これは次の 項目 を持つ:

注: この仕様の将来のバージョンでは、 navigation のより完全な履歴を提供するために、interaction context 中に発生する すべての URL 更新を追跡する可能性がある。last URL value は、 現在 PerformanceSoftNavigation の name で公開されるのが first URL value のみであっても、効果を interaction の最終状態へ正確に帰属させることを確保するため、内部的に追跡される。

3.3. 基盤アルゴリズム

現在の 操作コンテキストを取得するには、Document document が与えられたとき、次を実行する:
  1. context を、内部 AsyncContext.Variable [[ActiveInteractionContext]] の値とする。

  2. context が null でなく、かつ contextコンテキスト文書document と等しくない場合、null を返す。

  3. context を返す。

操作のコンテキストを取得または作成するには、 Document documentPerformanceEventTiming timing entry が与えられたとき、次を実行する:
  1. interaction id を、timing entryinteractionId とする。

  2. interaction id が 0 より大きいことを 表明する

  3. document操作 ID から操作コンテキストへの写像[interaction id] が 存在する場合、 document操作 ID から操作コンテキストへの写像[interaction id] を返す。

  4. interaction context を新しい InteractionContext とする。

  5. interaction contextidinteraction id に設定する。

  6. interaction contextコンテキスト文書document に設定する。

  7. interaction context開始 時刻timing entrystartTime に設定する。

  8. document操作 ID から操作コンテキストへの写像[interaction id] を interaction context設定する

  9. interaction context を返す。

イベントの操作コンテキストを更新するには、 Document documentEvent event が与えられたとき、次を実行する:
  1. timestamp を、document関連するグローバルオブジェクト を指定して得られる 現在の高分解能時刻 とする。

  2. is scroll を、event の型が "scroll" であれば true、そうでなければ false とする。

  3. is input を、event の型が 入力イベントを配送済みである を引き起こすイベント型 ([EVENT-TIMING] で定義される)であれば true、そうでなければ false とする。

  4. is scroll が false で、かつ is input が false である場合、返る。

  5. document操作 ID から操作 コンテキストへの写像 の 値の各 interaction context について:

    1. is scroll が true で、かつ interaction context最初のスクロールタイムスタンプ が 0 である場合:

      1. interaction context最初のスクロール タイムスタンプtimestamp に設定する。

    2. is input が true で、かつ interaction context最初の入力タイムスタンプ が 0 である場合:

      1. interaction context最初の入力 タイムスタンプtimestamp に設定する。

イベント配送のために現在の操作コンテキストを 設定するには、null または PerformanceEventTiming オブジェクト timing entry が与えられたとき、次を実行する:
  1. timing entry が null である場合、null を返す。

  2. interaction id を、timing entryinteractionId とする。

  3. interaction id が 0 である場合、null を返す。

  4. event を、timing entry関連付けられたイベント とする。

  5. document を、event関連するグローバルオブジェクト関連付けられた Document とする。

  6. documentevent が与えられたものとして、イベントの操作コンテキストを 更新する

  7. interaction context を、documenttiming entry が与えられたものとして 操作のコンテキストを取得または作成する 結果とする。

  8. 内部 AsyncContext.Variable [[ActiveInteractionContext]] の値を interaction context に設定する。

  9. interaction context を返す。

イベント配送後に現在の操作コンテキストを 設定解除するには、次を実行する:
  1. 内部 AsyncContext.Variable [[ActiveInteractionContext]] の値を null に設定する。

4. インタラクションの Contentful Paint

4.1. InteractionContentfulPaint インターフェイス

[Exposed=Window]
interface InteractionContentfulPaint : PerformanceEntry {
    readonly attribute LargestContentfulPaint largestContentfulPaint;
    readonly attribute unsigned long long interactionId;

    object toJSON();
};

InteractionContentfulPaint includes PaintTimingMixin;

InteractionContentfulPaint は、以下を持つ。

largestContentfulPaint 属性のゲッターは、this最大コンテンツフルペイントを返さなければならない。

interactionId 属性のゲッターは、thisコンテキストid を返さなければならない。

name 属性のゲッターは空文字列を返さなければならない。

entryType 属性のゲッターは "interaction-contentful-paint" を返さなければならない。

startTime 属性のゲッターは、thisコンテキスト開始時刻を返さなければならない。

duration 属性のゲッターは、thisペイント タイミング情報に対する 既定のペイントタイムスタンプと、thisコンテキスト開始時刻との差を返さなければならない。

注: このエントリは、静的な 操作プロパティ(interactionIdstartTime など)を、関連付けられた InteractionContext から動的に照会する一方で、 その視覚的更新の正確な状態をこれらのメトリクスが反映するように、 作成時にペイントの ペイントタイミング情報と候補 LargestContentfulPaint エントリの静的なスナップショットを取得する。

4.2. Interaction Contentful Paint アルゴリズム

Window windowInteractionContext interaction contextLargestContentfulPaint lcpEntry、および paint timing info paintTimingInfo が与えられたとき、 create an interaction contentful paint entry するには、次を実行する。
  1. entry を、windowrealm 内の新しい InteractionContentfulPaint オブジェクトとする。

  2. entrycontextinteraction context に設定する。

  3. entrylargest contentful paintlcpEntry に設定する。

  4. entry に関連付けられた paint timing infopaintTimingInfo に設定する。

  5. entry を返す。

新しい属性付けされたコンテンツフルペイント 候補を処理するには、 最大コンテンツフルペイント候補 lcpCandidateDocument documentInteractionContext interaction context、および ペイント タイミング情報 paintTimingInfo が与えられたとき、次を実行する:
  1. interaction context最初のスクロールタイムスタンプ が 0 より大きく、かつ lcpEntryrenderTimeinteraction context最初のスクロールタイムスタンプ より大きい場合、返る。

  2. interaction context最初の入力タイムスタンプ が 0 より大きく、 かつ lcpEntryrenderTimeinteraction context最初の入力タイムスタンプ より大きい場合、返る。

  3. lcpEntry を、lcpCandidatepaintTimingInfo、および documentLargestContentfulPaint エントリを作成する結果とする。

  4. globaldocument関連するグローバルオブジェクト とする。

  5. paint timing info を、lcpEntry に関連付けられた ペイントタイミング情報 とする。

  6. icpEntry を、globalinteraction contextlcpEntry、および paint timing info が与えられたものとして、操作コンテンツフル ペイントエントリを作成する結果とする。

  7. icpEntryキューに入れる

  8. icpEntryglobalパフォーマンスエントリバッファ に追加する。

  9. interaction context最初のコンテンツフルペイント が null である場合:

    1. interaction context最初のコンテンツフルペイントicpEntry に設定する。

  10. interaction context最大コンテンツフルペイントicpEntry に設定する。

  11. interaction context現在の最大 コンテンツフルペイント候補lcpCandidate に設定する。

注: InteractionContentfulPaint エントリは、インタラクションが最終的に ソフトナビゲーションになるかどうかとは独立して、 検出されるとパフォーマンスタイムラインへ送出されます。これにより、 開発者はすべてのインタラクションについてレンダリング更新を監視できます。

To インタラクション・コンテンツフル・ペイントおよび ソフトナビゲーションを報告するには、Document documentペイントタイミング情報 paintTimingInfo順序付き セットである 保留中の画像レコード paintedImages、および 順序付き セットである 要素 paintedTextNodes が与えられたとき:
  1. contextToCandidateSets を新しい マップとする。

  2. paintedImages の各 record について反復する

    1. elementrecord要素とする。

    2. interaction context を、element について ペイント帰属インタラクション コンテキストを取得する結果とする。

    3. interaction context が null でない場合:

      1. contextToCandidateSetsinteraction context含まない場合、 contextToCandidateSets[interaction context] を « «», «» » に 設定する。

      2. recordcontextToCandidateSets[interaction context][0] に 追加する

  3. paintedTextNodes の各 element について反復する

    1. interaction context を、element について ペイント帰属インタラクション コンテキストを取得する結果とする。

    2. interaction context が null でない場合:

      1. contextToCandidateSetsinteraction context含まない場合、 contextToCandidateSets[interaction context] を « «», «» » に 設定する。

      2. elementcontextToCandidateSets[interaction context][1] に 追加する

  4. contextToCandidateSets 内の各 interaction contextcandidateSets について反復する

    1. newCandidate を、documentcandidateSets[0]、 candidateSets[1]、および interaction context現在の 最大コンテンツフル・ペイント候補が与えられたときの 新しい 最大コンテンツフル・ペイント候補を計算する結果とする。

    2. newCandidate が null でない場合:

      1. newCandidatedocumentinteraction context、および paintTimingInfo が 与えられたとき、 新しい 帰属済みコンテンツフル・ペイント候補を処理する

      2. document および interaction context が与えられたとき、 ソフトナビゲーションの送出を 評価する

4.3. インタラクション・コンテンツフル・ペイントの帰属

InteractionPaintTimingNodeState は、次の項目を持つ 構造体である:


InteractionPaintTimingNodeState node state が、InteractionPaintTimingNodeState または null である other node state より 新しい かどうかを判定するには:
  1. other node state が null である場合、または node statemodification idother node statemodification id より大きい場合は true を返し、 それ以外の場合は false を返す。

所与の Node node について、 ペイント帰属インタラクションコンテキストを取得する には:
  1. documentnodeノード文書とする。

  2. node state を、document伝播済みノード状態[node] の デフォルト値付き null とする。

  3. node state が null である場合は null を返し、そうでなければ node statecontext を返す。

Node target node が与えられたとき、それを インタラクション・ペイントタイミング用に 変更済みのノードとして記録するには:
  1. documentnodeノード文書とする。

  2. target node が、document を与えたときの ペイントタイミング用に公開されるものでない場合、 return する。

  3. interaction context を、document が与えられたときの 現在のインタラクションコンテキストを取得する結果とする。

  4. interaction context が null の場合、return する。

  5. document最後の変更コンテキストinteraction context と等しくない場合:

    1. document最後の変更コンテキストinteraction context に設定する。

    2. document現在の変更世代 IDを 1 増やす。

  6. previous node state を、documentマーク済みノード 状態[target node] の デフォルト値付き null とする。

  7. previous node state が null でなく、かつ previous node statemodification iddocument現在の変更世代 IDと等しい場合、return する。

  8. node state を新しい InteractionPaintTimingNodeState とする。

  9. node statecontextinteraction context に設定する。

  10. node statemodification iddocument現在の変更世代 IDに設定する。

  11. documentマーク済みノード 状態[node] を node state設定する

  12. documentインタラクション・ペイントタイミングが dirty であるを true に設定する。

Document document が与えられたとき、 文書とその子孫の インタラクションコンテキストを更新するには:
  1. documentインタラクション・ペイントタイミングが dirty であるが false の場合、return する。

  2. document および null が与えられたとき、 ノードとその子孫の インタラクションコンテキストを更新する

  3. documentインタラクション・ペイントタイミングが dirty であるを false に設定する。

Node node、および InteractionPaintTimingNodeState inherited node state または null が与えられたとき、 ノードとその子孫の インタラクションコンテキストを更新するには:
  1. documentnodeノード文書とする。

  2. node state を、documentマーク済みノード 状態[node] の デフォルト値付き null とする。

  3. node state が null でない場合:

    1. node stateinherited node state より 新しい場合:

      1. inherited node statenode state に設定する。

      2. nodeText ノードである場合、documentマーク済みノード 状態[node] を削除する

    2. そうでなければ、documentマーク済み ノード状態[node] を削除する

  4. inherited node state が null でなく、かつ nodeタイミング対象である場合:

    1. attribution element を、node について 帰属要素を取得する結果とする。

    2. previous propagated state伝播済みノード 状態[attribution element] の デフォルト値付き null とする。

    3. inherited node stateprevious propagated state より新しい場合:

      1. 伝播済みノード 状態[attribution element] を inherited node state に設定する。

      2. previous propagated state が null である、または previous propagated statecontextinherited node statecontext と等しくない場合、 attribution element について ペイント追跡をリセットする

  5. node の各 child node について反復しchild node および inherited node state が与えられたとき、 ノードとその子孫の インタラクションコンテキストを更新する

注: 単純化のため、このアルゴリズムは、 伝播済み状態を再処理する必要があるたびに DOM 全体を走査します。これは、ペイント可能な DOM の一部のみを 処理するように最適化できます。たとえば、既知の非表示サブツリーや、 content-visibility や CSS containment などの既存の仕組みによって スキップされるサブツリーも、この処理中にスキップできます。ただし、それらは次回ペイントされる前に 更新されている必要があります。また、関連する状態がペイント前に更新される限り、 これらの手順を別の(ペイント前の)ツリー走査と統合することで、さらに最適化できることにも注意してください。

注: [CONTAINER-TIMING] API は、 レンダリング効果を共通の DOM 祖先ごとにグループ化し、集約されたペイント情報を パフォーマンスタイムラインへ報告する仕組みを提供します。この仕様の将来バージョンでは、 Container Timing を拡張して、単一のコンテナーに対する複数のクライアント (すなわち、グローバルな "containertiming" 属性とインタラクションごとのタイミング)を サポートし、Container Timing に基づいてインタラクション・ペイントタイミングを実装できるようにする予定です。 記録された各ノードは、 それを変更したインタラクションに対するコンテナーとみなされ、 各インタラクションがコンテナーの集合と関連付けられるようになります。その後、 この仕様は、各インタラクションについて、マーク済みコンテナー内で発生する最大コンテンツフル・ペイントを 追跡します。さらに、Container Timing が追跡するその他の有用な情報、 たとえば各インタラクションについてのコンテナーの集約総ペイント面積なども公開できる可能性があります。

5. ソフトナビゲーション

5.1. PerformanceSoftNavigation インターフェイス

[Exposed=Window]
interface PerformanceSoftNavigation : PerformanceEntry {
    readonly attribute NavigationType navigationType;
    readonly attribute unsigned long long interactionId;
    InteractionContentfulPaint? getLargestInteractionContentfulPaint();
};

PerformanceSoftNavigation includes PaintTimingMixin;

PerformanceSoftNavigation は次を持つ:

navigationType 属性のゲッターは、thisコンテキストナビゲーション型を返さなければならない。

interactionId 属性のゲッターは、thisコンテキストid を返さなければならない。

getLargestInteractionContentfulPaint() メソッドは、thisコンテキスト最大コンテンツフルペイントを返さなければならない。

name 属性のゲッターは、thisコンテキスト最初の URL 値を返さなければならない。

entryType 属性のゲッターは "soft-navigation" を返さなければならない。

startTime 属性のゲッターは、thisコンテキスト開始時刻を返さなければならない。

duration 属性のゲッターは、発行時点での thispresentationTimethisコンテキスト開始時刻との差を返さなければならない。

注: 実際には、getLargestInteractionContentfulPaint() は非 null のエントリを返すことが期待される。確認済みのソフトナビゲーションは、 その送出をトリガーするために、少なくとも 1 つの検出されたインタラクション・コンテンツフル・ペイントを 必要とするためである。

しかし、将来の反復では、ソフトナビゲーションを、最初のペイントより前の URL 変更時点で ただちにコミット済みとみなせるかどうかを評価する可能性がある。そのようなモデルでは、このメソッドは 送出時点で null を返す場合がある。

このタイミングに関する主な設計上の考慮事項は、URL 変更から最初のペイントまでの 区間で発生する他のタイムラインエントリ(例: LayoutShiftPerformanceResourceTimingLongAnimationFrameTiming など)の帰属である。多くのサイトでは、 たとえば fetch リクエストを開始した直後に新しい URL をコミットするが、その間も現在のページは 以前のナビゲーション状態に留まる。タイムラインの切り分けを一貫させるため、この仕様は、 最初のペイントが遷移を確認するまで、そのようなすべてのエントリを以前のナビゲーション識別子に帰属させる。

5.2. ソフトナビゲーションのアルゴリズム

ソフトナビゲーションとは、 以下の条件を満たす同一文書ナビゲーションである:

To ソフトナビゲーション発行を評価する given a Document document and an InteractionContext interaction context:
  1. interaction context発行済み が true である場合、返る。

  2. documentアクティブなソフトナビゲーション候補interaction context でない場合、返る。

  3. interaction context最初の URL 値 が null である場合、返る。

  4. interaction context最初のコンテンツフルペイント が null である場合、返る。

  5. windowdocument関連するグローバルオブジェクト とする。

  6. entry を、windowinteraction context が与えられたものとして ソフトナビゲーション エントリを作成する結果とする。

  7. windowentry が与えられたものとして、ソフトナビゲーションエントリを発行する

  8. interaction context発行済み を true に設定する。

To ソフト ナビゲーションエントリを作成する given a Window window, and an InteractionContext interaction context:
  1. entry を、windowrealm 内の新しい PerformanceSoftNavigation オブジェクトとする。

  2. entryコンテキストinteraction context に設定する。

  3. first paintinteraction context最初のコンテンツフルペイント とする。

  4. first paint が null でないことを 表明する

  5. entry に関連付けられた ペイントタイミング情報 を、first paint に関連付けられた ペイントタイミング情報 に設定する。

  6. entry を返す。

To ソフト ナビゲーションエントリを発行する given a Window window and a PerformanceSoftNavigation entry:
  1. window が与えられたものとして、現在のナビゲーション ID を増加させる

  2. entryキューに入れる

  3. entrywindowパフォーマンスエントリバッファ に追加する。

注: この navigationId for this PerformanceSoftNavigation エントリは、他の PerformanceEntry 型の挙動と一致するように、パフォーマンスタイムラインへキューに入れられる一部として自動的に設定される。

To 同一 文書コミットを処理する given a Document document, 文字列 url, and NavigationType navigation type:
  1. urldocumenturl と等しい場合、返る。

  2. interaction context を、document が与えられたものとして 現在の操作 コンテキストを取得する結果とする。

  3. interaction context が null である場合、返る。

  4. interaction context最後の URL 値url に設定する。

  5. interaction context最初の URL 更新タイムスタンプ が null である場合:

    1. interaction context最初の URL 更新 タイムスタンプ を、document関連するグローバルオブジェクト が与えられたものとして得られる 現在の高分解能時刻 に設定する。

    2. interaction context最初の URL 値url に設定する。

    3. interaction contextナビゲーション型navigation type に設定する。

  6. documentアクティブなソフトナビゲーション候補interaction context に設定する。

  7. documentinteraction context が与えられたものとして、ソフトナビゲーション発行を評価する

6. 仕様統合

6.1. DOM 統合

6.1.1. Document

文書 は、操作 ID から 操作コンテキストへの写像、すなわち マップを持ち、 初期状態では空である。

文書 は、アクティブなソフトナビゲーション 候補、すなわち InteractionContext または null を持ち、初期状態では null である。

文書 は、現在の変更 生成 ID、すなわち 64 ビット符号なし整数を持ち、0 に初期化される。

注: 現在の変更生成 ID は、関連する DOM 変更が、前回の 変更とは異なる InteractionContext で発生したときに 変化する。これにより、関連する変更をまとめて グループ化できるようになり、InteractionPaintTimingNodeState オブジェクトを 新しさの観点から比較し、追跡が必要なノードを最適化できるようになる。

文書 は、最後の変更 コンテキスト、すなわち InteractionContext または null を持ち、初期状態では null である。

文書 は、マークされたノード状態、すなわち マップ であり、Node から InteractionPaintTimingNodeState への対応を持ち、 初期状態では空である。

文書 は、伝播されたノード状態、すなわち マップ であり、Node から InteractionPaintTimingNodeState への対応を持ち、 初期状態では空である。

文書 は、操作ペイント タイミングがダーティであるか、すなわち真偽値を持ち、 初期状態では false である。

6.1.2. Node

node insert において、または node node が 次のいずれかの方法で変更されたとき:

次の手順を実行する:

  1. node が与えられたとき、インタラクション・ペイントタイミング用に 変更済みのノードとして記録する

6.2. HTML 統合

6.2.1. History

履歴ステップ適用のために文書を更新するにおいて、 5.5.1(documentsEntryChanged が true であり、かつ documentIsNew が false である場合)の前に、同一 文書コミットを処理するを、Document、 対象エントリの url、および "traverse" が与えられたものとして実行する。

共有 履歴 push/replace ステップ[HTML] で定義される)において、 URL が更新された後、同一文書コミットを処理するを、 Document、新しい URL、および操作型("push" または "replace" のいずれか)が与えられたものとして実行する。

6.2.2. ハードナビゲーション

新しい Window が作成されたとき(例:"hard" navigation の間)、 現在のナビゲーション ID§ 2.1 ナビゲーション ID で指定されるとおりに初期化される。

[NAVIGATION-TIMING] において、初期ナビゲーション用の PerformanceNavigationTiming エントリを作成するとき、ユーザーエージェントは、その navigationIdWindow現在のナビゲーション ID に設定しなければならない。

6.3. Event Timing 統合

この仕様は、[EVENT-TIMING] における操作の定義を拡張し、現代の Web アプリケーションおよび シングルページアプリケーションに関連する追加の イベント型を含める。

次のイベント型は、操作[EVENT-TIMING] で定義される)の一部とみなされる:

これらのイベントがユーザー操作の結果として配送される場合、ユーザーエージェントは、それらに 文書の 関連するグローバルオブジェクト について 次の interactionId を取得する ことによって得られる一意の interactionId を割り当てなければならない。イベントが、すでに interactionId が割り当てられている以前の操作によってトリガーされた場合、ユーザーエージェントは その同じ識別子を再利用するべきである。

注:これらのイベントは、ユーザー操作から始まる 開始イベントである場合にのみ、一次的なインタラクションとして報告される (例:ブラウザー UI の戻るボタンをクリックする場合)。その他のほとんどのシナリオ、たとえば click ハンドラーが手動で履歴を操作する場合では、その後の popstate または navigate イベントは 独立したユーザーインタラクションとはみなされない。

これらのプログラム的に発火されたイベントには isTrusted フラグが設定されていない場合があるが、履歴 API および ナビゲーション API は開始タスクの非同期継続として扱われるため、[ASYNC-CONTEXT] を介して元のインタラクションに 正しく帰属される。

注: イベント navigatepopstate、および hashchange は、 ソフトナビゲーションを追跡し interactionId を割り当てるための内部シグナルとして 使用される。この仕様は、これらの イベント種別を PerformanceEventTiming エントリとして パフォーマンスタイムラインへ公開することを要求せず、 その判断を [EVENT-TIMING] 仕様に委ねる。

注: [EVENT-TIMING] 仕様は、 processingStart および processingEnd フックを明示的に定義し、 interactionId の割り当てがこの統合に十分な早さで 発生することを保証するよう更新されることが期待される。現在、interactionId の割り当ては通常、 イベント処理の終了まで 遅延される。

この仕様は、 安全なグローバルカウンターを保証するため、interactionId に対して unsigned long long を使用する一方、[EVENT-TIMING] は現在、それを unsigned long として定義している。この不一致は、 両仕様の将来バージョンで解決されることが期待される。

Window window について、 次の interactionId を取得するには:
  1. windowinteraction count を、windowinteraction count に 1 を加えた値に設定する。

  2. windowinitial interactionId value に、 (windowinteraction countwindowinteractionId increment の積)を加えた値を返す。

[EVENT-TIMING] で定義される DOM 仕様の イベント 配送アルゴリズムへの変更において:
  1. timingEntryイベントタイミング処理開始を初期化して記録する 結果に設定する手順の直後に、次の手順を実行する:

    1. timingEntry が与えられたとき、イベント配送用の現在の インタラクションコンテキストを設定する

  2. イベントタイミング処理終了を記録するを呼び出す手順の 直前に、次の手順を実行する:

    1. イベント配送後に現在の インタラクションコンテキストを未設定にする

6.4. Paint Timing 統合

この仕様は、[PAINT-TIMING] 仕様を拡張し、インタラクションによって変更された要素について ペイント追跡をリセットし、レンダリングされた文書に対するペイント帰属をトリガーする。

mark paint timing を変更し、 Document document が与えられたとき、手順 1 の後に次の手順を追加する:
  1. document が与えられたとき、文書とその子孫の インタラクションコンテキストを更新する

Mark paint time は、UA が文書をペイントする前に来るべき手順と 後に来るべき手順を混在させている。ここで追加される手順は、ペイント前に発生することが期待される。[w3c/paint-timing Issue #126]

mark paint timing を変更し、手順 10.3(largest contentful paint を報告する)の後に次の手順を追加する。 その際、Document documentペイントタイミング情報 paintTimingInfo順序付きセットである 保留中の画像レコード paintedImages、および 順序付き セットである 要素 paintedTextNodes を与える:
  1. documentpaintTimingInfopaintedImages、および paintedTextNodes が与えられたとき、 インタラクション・ コンテンツフル・ペイントおよびソフトナビゲーションを報告する

次のアルゴリズムを追加する:

Node node について、 ペイント 追跡をリセットするには:
  1. node のテキスト要素追跡をリセットする。

  2. node の画像要素追跡をリセットする。

これはプレースホルダー アルゴリズムである。関連する要素について再ペイントを許可する必要があるが、 その再ペイントは Element Timing または LCP に影響してはならない。テキストと画像は、 関連するペイントが発生したことを検出する仕組みが異なり、どちらも再ペイントをサポートするよう 更新される必要がある。

次のアルゴリズムを追加する:

Node node について、 帰属 要素を取得するには:
  1. nodeText node である場合、node包含ブロックを決定する Element を返す。

  2. そうでなければ、node を返す。

6.5. Largest Contentful Paint(LCP)統合

7. セキュリティとプライバシーの考慮事項

Soft Navigations を performance timeline に公開すること自体には、セキュリティおよびプライバシー上の影響はありません。 しかし、検出された soft navigation の結果としてさまざまな paint timing エントリをリセットすることには、 影響があり得ます。特に visited links が パーティション化される前はそうです。そのため、 :visited cache をパーティション化せずにそのような paint 操作を公開することは、対象となる paint 操作を慎重に分析し、それらが origin をまたいでユーザーの履歴を公開しないことを確認した後に 限って行う必要があります。

同様に、詳細な paint timing 情報(Interaction Contentful Paint を通じたものなど)を公開すると、 spelling または grammar error decorations( ::spelling-error または ::grammar-error による)が適用されたときの paint 更新を観測するために使用される可能性があります。緩和策がない場合、これにより 攻撃者がテキストフィールド内の単語をプログラムによって順に試し、それらがユーザーの辞書に 存在するかどうかを確認できる可能性があります。しかし、ブラウザーは spelling および grammar checks をユーザー操作(例: キー押下またはクリック)ごとに 1 回だけ発生するように制限することで、ユーザー辞書の リークを防止しています。timing および paint 情報は、他の標準 API を通じて開発者がすでに観測可能であるため、これらの timing entries を公開しても、ブラウザーの spelling/grammar highlight rate limits によってすでに制約されている ものを超える新たな情報漏えいは導入されません。

8. 付録: 重複するインタラクションと競合状態

この節は非規範的です。

ウェブアプリケーションは、多くの場合、複数のユーザーインタラクションを短時間に連続して処理します。 この仕様は、次のモデルを通じて、そのような重なり合うインタラクションを扱います:

索引

この仕様により定義される 用語

参照により定義される 用語

参考文献

規範的参考文献

[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[EVENT-TIMING]
Michal Mocny. Event Timing API. URL: https://w3c.github.io/event-timing/
[HR-TIME-3]
Yoav Weiss. High Resolution Time. URL: https://w3c.github.io/hr-time/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[LARGEST-CONTENTFUL-PAINT]
Yoav Weiss. Largest Contentful Paint. URL: https://w3c.github.io/largest-contentful-paint/
[NAVIGATION-TIMING-2]
Yoav Weiss; Noam Rosenthal. Navigation Timing Level 2. URL: https://w3c.github.io/navigation-timing/
[PAINT-TIMING]
Ian Clelland; Noam Rosenthal. Paint Timing. URL: https://w3c.github.io/paint-timing/
[PERFORMANCE-TIMELINE]
Nicolas Pena Moreno. Performance Timeline. URL: https://w3c.github.io/performance-timeline/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

非規範的参考文献

[ASYNC-CONTEXT]
AsyncContext. URL: https://github.com/tc39/proposal-async-context
[CONTAINER-TIMING]
Container Timing API. URL: https://github.com/WICG/container-timing
[NAVIGATION-TIMING]
Zhiheng Wang. Navigation Timing. 17 December 2012. REC. URL: https://www.w3.org/TR/navigation-timing/

IDL 索引

[Exposed=(Window,Worker)]
partial interface PerformanceEntry {
    readonly attribute unsigned long long navigationId;
};

[Exposed=Window]
interface InteractionContentfulPaint : PerformanceEntry {
    readonly attribute LargestContentfulPaint largestContentfulPaint;
    readonly attribute unsigned long long interactionId;

    object toJSON();
};

InteractionContentfulPaint includes PaintTimingMixin;

[Exposed=Window]
interface PerformanceSoftNavigation : PerformanceEntry {
    readonly attribute NavigationType navigationType;
    readonly attribute unsigned long long interactionId;
    InteractionContentfulPaint? getLargestInteractionContentfulPaint();
};

PerformanceSoftNavigation includes PaintTimingMixin;

課題索引

この仕様は、安全なグローバル カウンターを保証するために interactionIdunsigned long long を使用している一方で、 [EVENT-TIMING] は現在、それを unsigned long として定義している。この不一致は、 両仕様の将来バージョンで解決されることが期待される。
Mark paint time は、UA が文書をペイントする前に来るべき手順と 後に来るべき手順を混在させている。ここで追加される手順は、ペイント前に発生することが期待される。 [w3c/paint-timing Issue #126]
これはプレースホルダーアルゴリズムである。関連する要素について再ペイントを許可する必要があるが、 その再ペイントは Element Timing または LCP に影響してはならない。テキストと画像は、 関連するペイントが発生したことを検出する仕組みが異なり、どちらも再ペイントをサポートするよう更新される必要がある。