進め方
同じタブインジケーターでも、待機中は滑らかなのにナビゲーション中にカクつくことがあります。このスキルは、各フレームがどれだけの描画処理を引き起こすか、そしてアニメーションのドライバーがメインスレッド上のほかの処理と競合していないか、という2点を切り分けます。GPUヒントを最初から追加するのではなく、プロパティとドライバーの確認から始めます。
ソースでは、目立ちにくい経路も確認します。フレームごとのReactの状態更新、大きなサブツリーにわたって変化する継承されたCSS変数、負荷の高いブラー、Motionの省略記法によるtransformなどです。推奨事項はコードに結びつけ、ブラウザやデバイスの挙動による条件も付けます。高速なデスクトップで動いても、修正の証明とは見なしません。
期待される成果物
- アニメーション対象の要素、ドライバー、プロパティの一覧
- ファイルの場所と変更前後の比較を含む、原因別の改善提案
- コード調査と実機で記録した証拠の明確な区別
入力から所見まで
- 01対象のモーションを洗い出す
要素、アニメーションドライバー、プロパティを一つずつ挙げ、ナビゲーションやハイドレーションなど同時に走る処理も記載します。コストを判断する前に、広範なトランジションやライブラリの省略記法を展開します。
- 02考えられる原因を見つける
まずレイアウトとペイントの処理を調べ、次にメインスレッドの競合、フレームごとのReactレンダー、スタイル再計算を確認します。提案する変更は、漠然とした最適化ではなく、特定の経路に結びつけます。
- 03実際の操作をプロファイルする
ブラウザのパフォーマンス記録で、フレーム落ちとロングタスクを確認します。可能であれば実際の対象スマートフォンで確認してください。デスクトップのCPUスロットリングでは、非力なGPUやデバイスのメモリ制限は再現できません。
- 04検証の限界を明記して報告する
ファイルの場所、原因、変更前後を比較できる改善案を、想定コストの順に並べて示します。コードから推測した内容と実測した内容を明記し、修正の適用は許可を待ちます。