長いアニメーションフレーム API

1. はじめに

ページの読み込み中、およびその後にユーザーがページとやり取りしている間、アプリケーションと ブラウザーの両方がさまざまなイベントをキューに入れ、それらはその後ブラウザーによって実行される。たとえば、ユーザーエージェントは ユーザーの活動に基づいて入力イベントをスケジュールし、アプリケーションは requestAnimationFrame やその他のコールバックの コールバックをスケジュールする、などである。キューに入ると、ブラウザーはこれらのイベントを 1 つずつキューから取り出して実行する。

しかし、一部のタスクは長時間（複数フレーム）かかることがあり、その場合、UI スレッドが ブロックされ、他のすべてのタスクもブロックされる可能性がある。ユーザーには、これは一般に、ブラウザーがユーザー入力に 応答できない「ロックアップした」ページとして見える。これは今日の Web における悪いユーザー体験の大きな原因である:

遅延した「インタラクティブまでの時間」:

ページの読み込み中、あるいは完全に視覚的にレンダリングされた後であっても、長いタスクはしばしばメイン スレッドを占有し、ユーザーがページとやり取りすることを妨げる。設計の悪いサードパーティコンテンツが しばしば原因となる。

高い/変動する入力レイテンシ:

重要なユーザー操作イベント（例: tap、click、scroll、wheel など）は長いタスクの後ろにキューされ、 ぎこちなく予測できないユーザー体験をもたらす。

高い/変動するイベント処理レイテンシ:

入力と同様に、イベントコールバック（例: onload イベントなど）の処理はアプリケーションの更新を遅延させる。

ぎこちないアニメーションとスクロール:

一部のアニメーションおよびスクロール操作には、コンポジターとメインスレッド間の協調が必要である。 長いタスクがメインスレッドをブロックしている場合、アニメーションとスクロールの応答性に影響を与える可能性がある。

一部のアプリケーション（および RUM ベンダー）は、 「長いタスク」が発生する場合を特定し追跡しようとすでに試みている。たとえば、既知のパターンの 1 つは、 短い周期タイマーを設置し、連続する発火間の経過時間を調べることである。経過時間が タイマー周期より大きい場合、1 つ以上の長いタスクがイベントループの実行を遅延させた可能性が高い。 この方法はおおむね機能するが、いくつかの悪いパフォーマンス上の影響がある。長いタスクを検出するためにポーリングすることで、 アプリケーションは静止状態と長いアイドルブロックを妨げる（requestIdleCallback を参照）。バッテリー寿命に悪影響を及ぼす。 遅延の原因が何であるか（例: ファーストパーティコードかサードパーティコードか）を知る方法がない。

RAIL パフォーマンスモデルは、 アプリケーションはユーザー入力に 100ms 未満で応答すべきであると示唆している（タッチ移動とスクロールでは、 しきい値は 16ms である）。この API の目的は、アプリケーションがこれらの目標を達成するのを妨げる可能性のある タスクについて通知を表面化することである。この API は 50ms 以上かかるタスクを表面化する。これらのタスクがない Web サイトは、 ユーザー入力に 100ms 未満で応答できるはずである。ユーザー入力を受け取った時点で実行中のタスクを完了するのに 50ms 未満、そのようなユーザー入力に反応するタスクを実行するのに 50ms 未満で済むからである。

1.1. 使用例

const observer = new PerformanceObserver(function(list) {
    for (const entry of list.getEntries()) {
        // 長いタスク通知を処理する:
        // 分析と監視のために報告する
        // ...
    }
});
// 過去および将来の長いタスク通知のためにオブザーバーを登録する。
observer.observe({type: "long-animation-frame", buffered: true});
// この後の長いスクリプト実行により、オブザーバー内で
// "long-animation-frame" エントリがキューされ、受信される。

// 過去および将来の長いアニメーションフレーム通知のためにオブザーバーを登録する。
// この後、メインスレッドがビジーである長い期間により、オブザーバー内で
// "long-animation-frame" エントリがキューされ、受信される。
observer.observe({type: "long-animation-frame", buffered: true});

1.2. 長いアニメーションフレームと長いタスク

long tasks と長いアニメーションフレームはいずれも混雑とジャンクを測定するが、長い アニメーションフレームは、 ユーザーがこの種の混雑をどのように知覚するかとよりよく相関する情報を提供する。 これは、長いアニメーションフレームが、メインスレッドがアイドルになったときに始まり、 フレームがレンダリングされるか、またはユーザーエージェントがレンダリングするものはないと判断したときに終わるシーケンスを測定するためである。

task という用語は実装詳細のようなものであり、長いアニメーション フレームの追加は、 メインスレッドの混雑/ジャンクという同じ現象について、よりユーザー中心の指標を導入することによってそれを改善しようとする。

長いアニメーションフレームはレンダリングフェーズが最大 1 つであることが保証されるため、 レンダリングフェーズ自体に関する追加情報、たとえば renderStart や styleAndLayoutStart も公開できる。

2. 長いアニメーションフレームのタイミング

long animation frame は、継続時間が 50ms を超える次のいずれかの発生を指す:

• task。その後、レンダリングの更新が必要ないもの。

• task。その後、レンダリングの更新が必要であり、レンダリングが更新されるまでのもの。

Long Animation Frame timing には、次の新しいインターフェイスが含まれる:

2.1. PerformanceLongAnimationFrameTiming インターフェイス

[Exposed=Window]
interface PerformanceLongAnimationFrameTiming : PerformanceEntry {
    /* PerformanceEntry のオーバーロード */
    readonly attribute DOMHighResTimeStamp startTime;
    readonly attribute DOMHighResTimeStamp duration;
    readonly attribute DOMString name;
    readonly attribute DOMString entryType;

    readonly attribute DOMHighResTimeStamp renderStart;
    readonly attribute DOMHighResTimeStamp styleAndLayoutStart;
    readonly attribute DOMHighResTimeStamp blockingDuration;
    readonly attribute DOMHighResTimeStamp firstUIEventTimestamp;
    [SameObject] readonly attribute FrozenArray<PerformanceScriptTiming> scripts;
    [Default] object toJSON();
};

PerformanceLongAnimationFrameTiming includes PaintTimingMixin;

PerformanceLongAnimationFrameTiming は frame timing info timing info を持つ。

entryType 属性の getter 手順は、"long-animation-frame" を返すことである。

name 属性の getter 手順は、"long-animation-frame" を返すことである。

startTime 属性の getter 手順は、relative high resolution time を返すことである。これは this の timing info の start time と this の relevant global object が与えられたものである。

duration 属性の getter 手順は、duration を返すことである。これは this の startTime と、relative high resolution time との間のものである。後者は this の timing info の end time と this の relevant global object が与えられたものである。

renderStart 属性の getter 手順は、relative high resolution time を返すことである。これは this の timing info の update the rendering start time と this の relevant global object が与えられたものである。

styleAndLayoutStart 属性の getter 手順は、relative high resolution time を返すことである。これは this の timing info の style and layout start time と this の relevant global object が与えられたものである。

firstUIEventTimestamp 属性の getter 手順は、relative high resolution time を返すことである。これは this の timing info の first ui event timestamp と this の relevant global object が与えられたものである。

blockingDuration 属性の getter 手順は次のとおりである:

1. sortedTaskDurations を timing info の task durations を 降順にソートしたものとする。

2. this の timing info の update the rendering start time が 0 でない場合、次を実行する:

   1. renderDuration を、duration とする。これは this の renderStart と relative high resolution time との間のものであり、後者は this の timing info の end time が与えられたものである。

   2. sortedTaskDurations[0] を renderDuration だけ増加させる。

      注: これにより、最長の task duration + render duration は、その合計 duration が >50ms であれば blocking とみなされる。

3. totalBlockingDuration を 0 とする。

4. sortedTaskDurations 内の各 duration について 反復し、 duration が 50 より大きい場合、totalBlockingDuration を duration - 50 だけ増加させる。

5. totalBlockingDuration を返す。

scripts 属性の getter 手順は次のとおりである:

1. scripts を list « » とする。

2. entryWindow を this の relevant global object とする。

3. For each scriptInfo in this の frame timing info の scripts:

   1. scriptWindow を scriptInfo の window とする。

   2. scriptEntry を、this の relevant realm 内の新しい PerformanceScriptTiming とする。 その timing info は scriptInfo であり、その window attribution は 最初に一致する文に対応する値である:

      scriptWindow is undefined

      other

      scriptWindow is entryWindow

      self

      entryWindow の関連 Document の node navigable の ancestor navigables が、scriptWindow の関連 Document の node navigable を contains する

      ancestor

      scriptWindow の関連 Document の node navigable の ancestor navigables が、entryWindow の関連 Document の node navigable を contains する

      descendant

      entryWindow の関連 Document の node navigable の top-level traversable が、scriptWindow の 関連 Document の node navigable の top-level traversable である

      same-page

      Otherwise

      other.

   3. scriptEntry を scripts に append する。

4. scripts を返す。

2.2. PerformanceScriptTiming インターフェイス

enum ScriptInvokerType {
    "classic-script",
    "module-script",
    "event-listener",
    "user-callback",
    "resolve-promise",
    "reject-promise"
};

enum ScriptWindowAttribution {
    "self", "descendant", "ancestor", "same-page", "other"
};

[Exposed=Window]
interface PerformanceScriptTiming : PerformanceEntry {
    /* PerformanceEntry のオーバーロード */
    readonly attribute DOMHighResTimeStamp startTime;
    readonly attribute DOMHighResTimeStamp duration;
    readonly attribute DOMString name;
    readonly attribute DOMString entryType;

    readonly attribute ScriptInvokerType invokerType;
    readonly attribute DOMString invoker;
    readonly attribute DOMHighResTimeStamp executionStart;
    readonly attribute DOMString sourceURL;
    readonly attribute DOMString sourceFunctionName;
    readonly attribute long long sourceCharPosition;
    readonly attribute DOMHighResTimeStamp pauseDuration;
    readonly attribute DOMHighResTimeStamp forcedStyleAndLayoutDuration;
    readonly attribute Window? window;
    readonly attribute ScriptWindowAttribution windowAttribution;
    [Default] object toJSON();
};

PerformanceScriptTiming は、関連する script timing info timing info を持つ。

PerformanceScriptTiming は、関連する ScriptWindowAttribution window attribution を持つ。

entryType 属性の getter 手順は、"script" を返すことである。

name 属性の getter 手順は、"script" を返すことである。

invokerType 属性の getter 手順は、this の timing info の invoker type を返すことである。

invoker 属性の getter 手順は次のとおりである:

1. this の invokerType に応じて分岐する:

   "`classic-script`"

   "`module-script`"

   this の timing info の source url を返す。

   "`event-listener`"

   1. targetName を this の timing info の invoker name とする。

   2. this の timing info の event target element id が空文字列でない場合: targetName を « targetName, "#", this の timing info の event target element id » の concatenation に設定する。

   3. そうでなく、this の timing info の event target element src attribute が空文字列でない場合: targetName を « targetName, "[src=", this の timing info の event target element src attribute, "]" » の concatenation に設定する。

   4. « targetName, ".on", this の timing info の event type » の concatenation を返す。

   これは 少し独自仕様に感じられるため、名前生成について議論する必要がある。

   "`user-callback`"

   this の timing info の invoker name を返す。

   "`resolve-promise`"

   "`reject-promise`"

   1. this の timing info の invoker name が空文字列である場合、 次を実行する:

      1. this の invokerType が "`resolve-promise`" であれば、"`Promise.resolve`" を返す。

      2. そうでなければ、"`Promise.reject`" を返す。

   2. invokerType が "`resolve-promise`" であれば thenOrCatch を "`then`" とし、そうでなければ "`reject-promise`" とする。

   3. « invoker name, ".", thenOrCatch » の concatenation を返す。

startTime 属性の getter 手順は、relative high resolution time を返すことである。これは this の timing info の start time と this の relevant global object が与えられたものである。

duration 属性の getter 手順は、duration を返すことである。これは this の startTime と、relative high resolution time との間のものである。後者は this の timing info の end time と this の relevant global object が与えられたものである。

executionStart 属性の getter 手順は、this の timing info の execution start time が 0 であれば 0 を返し、そうでなければ relative high resolution time を返すことである。これは this の timing info の execution start time と this の relevant global object が与えられたものである。

forcedStyleAndLayoutDuration 属性の getter 手順は、スタイルとレイアウトを同期的に実行するために費やされた時間を表す implementation-defined な値を返すことである。たとえば getComputedStyle() や getBoundingClientRect() の呼び出しによるものである。

これを 相互運用可能/規範的にする方法を見つける。おそらく WebIDL でこれらの関数を同期スタイル/レイアウトを必要とするものとしてマークするか? それが解決したら timing info に移す。

pauseDuration 属性の getter 手順は、this の timing info の pause duration を返すことである。

sourceURL 属性の getter 手順は、this の timing info の source url を返すことである。 sourceFunctionName 属性の getter 手順は、this の timing info の source function name を返すことである。 sourceCharPosition 属性の getter 手順は、this の timing info の source character position を返すことである。

window 属性の getter 手順は次のとおりである:

1. window を、deref を this の timing info の window に対して呼び出した結果とする。

2. window が undefined であれば null を返し、そうでなければ window を返す。

windowAttribution 属性の getter 手順は、this の window attribution を返すことである。

3. 処理モデル

注: Long Animation Frame API を実装するユーザーエージェントは、それぞれ "long-animation-frame" を supportedEntryTypes に、Window コンテキスト用に含める必要がある。

3.1. フレームタイミング情報

start time

current task start time

update the rendering start time

style and layout start time

first ui event timestamp

end time

DOMHighResTimeStamp。 初期値は 0。 注: 上記はすべて unsafe であり、 API を介して公開されるときには coarsened されるべきである。

task durations

DOMHighResTimeStamp の list。 初期値は空である。

scripts

script timing info の list。 初期値は空である。

pending script

Null または script timing info。初期値は null である。

script timing info は struct である。これは 次の items を持つ:

invoker type

ScriptInvokerType。

start time

end time

execution start time

unsafe な DOMHighResTimeStamp。 初期値は 0。

pause duration

ミリ秒数を表す DOMHighResTimeStamp。 初期値は 0。

invoker name

source url

source function name

event type

event target element id

event target element src attribute

文字列。初期値は空文字列である。

source character position

数値。初期値は -1。

window

WeakRef。 Window への参照である。

Document は、null または frame timing info である current frame timing info を持つ。初期値は null である。

3.2. 長いアニメーションフレームを報告する

3.2.1. 長いアニメーションフレームの監視 {#loaf-monitoring}

3.2.2. 長いスクリプトの監視

4. 既存の標準への追加

4.1. WebIDL 標準へのモンキーパッチ

5. セキュリティおよびプライバシーの考慮事項

Long Animation Frames API は、長いタスクのソースに関する origin-safe attribution information を含めることで same-origin policy に従う。長いタスクには 50ms のしきい値がある。継続時間は 1 ms の粒度でのみ提供される。これらにより、クロスオリジン漏洩に対して十分な保護が提供される。

Long Animation Frames API は、ユーザーによって実行されたタスクの継続時間と種類に関するタイミング情報、 および関数呼び出しを引き起こした browsing context などの attribution を提供する。これにより、攻撃者が ユーザーの行動を推測したり、ユーザーを識別したりするためのサイドチャネルタイミング攻撃を実行できる可能性がある。 たとえば、長いスクリプトの後に長いレンダーが続くパターンを組み合わせて、ソーシャル ウィジェットに対するユーザーの操作を推測できる。詳細な関数呼び出し attribution は、ユーザーの行動を特定するために使用されうる。

5.1. オブザーバーには何が公開されるか?

トップレベルページ内のすべてのオブザーバー（すなわち、ページ内のすべての iframe とメインフレーム）は、 長いアニメーションフレームの存在に関する通知を受け取る。タスクの開始時刻、その継続時間 （1 ms の粒度）、および原因となるフレームへのポインターを公開する。この情報は現在でも、 setTimeout を用いて、より高い解像度で観測できる。攻撃者は、ページ上の他のものをすべて消去し、 脆弱なクロスオリジンリソースを追加して、setTimeout からの遅延がそのリソースにより引き起こされることを保証することで、 これを行える。他の異なるページ（タブまたはウィンドウ）のオブザーバーは、ユーザーエージェントの アーキテクチャに関係なく通知を受け取るべきではない。

5.2. 考慮された攻撃シナリオ

考慮されたタイミング攻撃は次のとおりである:

1. 従来のタイミング攻撃: 外部リソースの読み込み時間を用いて、 private data のサイズを明らかにする。たとえば、ギャラリー内の隠し画像の数、ユーザー名が 有効かどうか、などである。例を参照。

2. サイドチャネルタイミング攻撃: 動画解析、スクリプト解析、App Cache 読み取り、 または Cache API（service workers）の使用にかかる時間を用いて、ユーザーを一意に識別したり、 ユーザーの年齢、性別、場所、興味などのプロファイルを作成したりする。 たとえば、ソーシャルネットワークからの ステータス更新を特定の属性（例: 20〜30 歳の女性）に限定できる場合、パーマリンクページのファイルサイズを 用いて、ユーザーが対象属性に含まれるかどうかを判断できる。

これらのシナリオは、50ms しきい値とクロスオリジン境界の尊重、すなわち信頼されていないクロスオリジン オブザーバーにタスクの種類や追加の attribution を表示しないことによって対処される。

5.3. Long Animation Frames API によって公開される追加情報

これを緩和するために、長いアニメーションフレームは「participating local roots」にのみ報告される。 シーケンスに寄与した作業タスクに関連付けられた文書、またはフレームの一部としてレンダリングされた文書のみが、 長いアニメーションフレームを観測する資格を持ち、その長いアニメーションフレームは、topmost であるか クロスオリジン親を持つ最も近い祖先においてのみ利用可能となる。

5.4. PerformanceScriptTiming と不透明なスクリプト