フレームの配置などを計算します。どれほど重いかとタイムラインによって計ることができます。コンソールで表示されています。毎回リフローが行われています。transformならどのブラウザーでもリフローしません。transformを使うとアニメーションがもっと滑らかになるでしょう。必要なときまで待ちます。APIによってはスタイルの処理をさせます。指定されたスタイルを使うとリフローはさせません。レンダーツリーが建てられたら、描画ができます。だいたい描画が一番重い過程です。コンテンツによっては完全に描画をスキップすることも可能です。レーヤーはフォトショップなどのレーヤーみたいです。ブラウザーが画像数枚を1回描画して、最後に全部を合成します。合成するのにGPUが得意ですのでよくGPUにやってもらいます。再描画する必要はありません。ブラウザーが自動的にレーヤーを作ってくれます。スクリプトのアニメーションでも、ブラウザーによって自動的にレーヤー化されます。アニメーションが始まるまでプリンがレーヤー化されません。場合によってアニメーションが始まったら、レーヤー化するのはもう遅いです。端末またコンテンツによってはレーヤー化するのに時間がかかります。反応が遅いと見えます。できればレーヤー化を前もってやってほしいです。ブラウザーにお願いすることができます。してしまうことまだあります。アニメーションが滑らかに進みます。効果を把握していませんので、コンポジターに渡せません。