モーション性能修正
CSS、Web Animations API、Motion、requestAnimationFrameなどのUI animationを監査する。 利用者が求めない限りanimation libraryを移行せず、既存方式の中で修正する。
描画コストを分類する
- composite：
transform、opacity - paint：色、border、gradient、mask、image、filter
- layout：size、position、flow、grid、flex
意図を満たせる最も低い描画コストを選ぶ。 ただし、小さく隔離された要素の一度限りのpaintまで一律に禁止しない。
重大な問題を先に直す
- 一frame内でlayout readとwriteを交互に行わない。
- 大きな面でlayout propertyを連続的にanimationしない。
scrollTop、scrollY、scroll eventをframeごとの駆動源にしない。- 停止条件のないrequestAnimationFrame loopを作らない。
- 同じcomponent内で複数のanimation systemがlayoutを測定・更新しないようにする。
方式を選ぶ
- movementとfadeは
transformとopacityを基本にする。 - interactionがJSを必要としない場合はCSSまたはplatform APIを使う。
- layoutに見える遷移は、開始と終了を一度測り、FLIP方式でtransformへ変換する。
- DOM readをまとめてからwriteを行う。
- animation中にlayoutを繰り返し測定しない。
scroll連動を直す
- 対応環境ではScroll TimelineまたはView Timelineを検討する。
- 可視状態の検出と停止にはIntersectionObserverを使う。
- scroll positionをpollingしない。
- 画面外のanimationを停止する。
- 大きな面で継続的なlayoutまたはpaintを起こさない。
paintとlayerを管理する
- paint propertyのanimationは小さく隔離された要素へ限定する。
- inherited CSS variableをanimationしない。
- transformやpositionを間接指定するCSS variableを連続更新しない。
will-changeは開始直前に限定して付与し、完了後に外す。- 大きいlayerや多数のlayerを作らない。
- 重要な場面ではbrowser profilerで実際のcompositeとpaintを確認する。
blurとtransitionを制限する
- blurは小さな要素、短い一回限りの効果に限定する。
- 大きな面またはloopでblurを動かさない。
- blurよりopacityとtranslateで意図を満たせないか先に検討する。
- View Transitionはnavigation級の変化に使い、頻繁に中断される操作には使わない。
利用者設定を尊重する
prefers-reduced-motionで不要な移動、拡大、parallaxを止める。- motionを止めても状態変化と操作結果が理解できるようにする。
- reduced modeを単なるduration短縮で済ませず、必要ならtransition自体を除く。
完了条件
- animationの開始と終了が明確で、不要なloopが残っていない。
- frameごとのlayout read/writeがない。
- 画面外とreduced motionで負荷が止まる。
- 既存animation systemを部分的に別方式へ移行していない。
- 重要な修正はprofileまたは再現手順で改善を確認できる。
出典
- [ibelick/ui-skills: fixing-motion-performance](https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance)
- MIT License
- 本文は原文を日本語の監査・修正手順へ再構成した派生文書である。