frames

Frames

このスキルでは、操作がスムーズに続くかを測定します。CPU にスロットリングをかけて操作を記録し、遅いフレームの原因を追跡し、2 回目の記録で修正を実証します。

感覚ではなく、トレースで確認

予算は厳密です。すべてのフレームが 1 回のリフレッシュ間隔（60Hz で 16.7ms）以内に収まり、何かが動いている間は、アニメーションフレームが 50ms を超えないようにします。すべての操作で、200ms 以内に応答を描画します。数値を伴わない「スムーズに感じる」は、調査結果です。

モーションの値をどうすべきかは motion の担当です。モーションをフレームごとに分解するのは deconstruct の担当です。実行中の結果を開くのは verify の担当です。

1. 操作を明確にする

ルート、手順、重要な瞬間を記述します。たとえば「コマンドパレットを開いて、3 文字入力する」のようにします。ブラウザーのエミュレーション呼び出しで CPU に 4 倍のスロットリングをかけます。これはミッドレンジのスマートフォンを想定したものです。スロットリングしていないノート PC でのトレースは frames-throttle-the-cpu です。

2. 記録する

observe.js をブラウザーの evaluate 呼び出しで実行します。window.__frames.start() を呼び出し、操作を 3 回行ってから、window.__frames.stop() を呼び出します。長いフレームに名前付きスクリプトがない場合は、パフォーマンスプロファイル全体も記録します。記録なしでスムーズさを報告するのは frames-trace-not-feel です。

3. 予算を確認する

記録を予算と照らし合わせます。フレームのドロップや、何かが動いている間の長いアニメーションフレームは frames-hold-the-budget です。duration が 200ms を超える操作は frames-answer-in-200ms です。時間が入力遅延、処理、表示のどこに費やされたかを明記します。

4. 原因を特定する

各長いフレームのスクリプトと、その強制レイアウトにかかった時間を確認し、次に、それらが指し示すコードを確認します。

大きなサブツリー全体でレイアウトプロパティをアニメーションさせると、毎フレーム再レイアウトが発生します。ページ全体に広がるパネルで top や width をアニメーションさせるのは frames-compositor-properties です。transform と opacity に置き換えます。

スタイルを書き込んだ後にレイアウトを読み取ると、ブラウザーはフレームの途中でレイアウトを強制します。style.height を設定するループ内で offsetHeight を読み取るのは frames-no-forced-layout です。まずすべての値を読み取り、その後に書き込みます。

毎フレームの状態更新は、毎フレーム、コンポーネントツリーを再レンダリングします。requestAnimationFrame のループやスクロールハンドラー内で setState を呼び出すのは frames-animate-outside-render です。モーション値、CSS 変数、または ref を使って値を動かします。

広い領域を毎フレーム再描画すると、モーションの効果に見合わないコストがかかります。動く全画面レイヤーに backdrop-filter を適用するのは frames-small-paint です。描画領域を小さくするか、静止したコピーをフェードさせます。

5. 修正をトレースする

同じ手順、同じスロットリングで再度記録します。両方の記録を並べて報告します。「これで速くなるはず」は frames-before-and-after です。終了したら CPU のスロットリングを解除します。

2 つの対比

各チェックは対比で示します。問題のある行と、置き換え後の行を並べます。

ルール	問題のある例	置き換え後
frames-throttle-the-cpu	スロットリングしていないノート PC でトレース	CPU を 4 倍にスロットリングしてトレース
frames-trace-not-feel	「ドロワーはスムーズに感じる」	「ドロワーを開く：ドロップフレーム 0、最悪の間隔 17ms、4 倍スロットリング時」
frames-hold-the-budget	シートが開く間に 14 フレームドロップ	ドロップ 0、50ms を超えるアニメーションフレームなし
frames-answer-in-200ms	キー入力の描画まで 340ms、そのうち 280ms が処理	90ms。フィルターをキー入力時の処理から移動
frames-compositor-properties	ページ全体のサイドバーで animate={{ width: 320 }}	幅を固定して animate={{ x: 0 }}
frames-no-forced-layout	行を順に処理するループ内で el.style.height = el.scrollHeight + "px"	すべての高さを先に読み取り、その後すべてを書き込む
frames-animate-outside-render	毎フレーム setProgress(p) を呼び出す	モーション値で progress.set(p) を呼び出す
frames-small-paint	動く全画面レイヤーに backdrop-filter: blur(20px)	静止した背景にぼかしを適用し、その上でパネルを動かす
frames-before-and-after	「これで速くなるはず」	修正前はドロップ 14、修正後は 0。同じ手順を 4 倍スロットリングで実施

レポート

重大度。 スロットリング時に200msを超えるインタラクションがある場合、または記録なしで滑らかだと報告された場合は、HIGHです。動作中のフレーム落ち、大規模なサブツリーでアニメーションするレイアウトプロパティ、強制レイアウト、またはフレームごとの状態更新は、MEDIUMです。スロットリングなしで取得したトレースもMEDIUMです。予算内に収まる大規模な再描画、または2回目の記録なしで報告された修正は、LOWです。

形式。 根本原因ごとに1件、測定値を含めて記載します。

1. file:line - [rule-id] what is wrong (dropped, worst gap, duration)

続いて、Rule | Count | Severityの概要を記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。長いアニメーションフレームに対応していないブラウザーでは、スクリプトの原因特定をNot verifiedと記載します。