アニメーション: CSS vs JavaScriptの議論

http://greensock.com/css-performance

1 comment | 1 point | by WazanovaNews 2年以上前 edited


Jshiike 2年以上前 edited | ▲upvoteする | link

GreenSockが、「アニメーションのパフォーマンスは、CSSが常に優れているというわけでない。」という観点からベンチマーク調査した結果を公表。それに対して、GoogleのPaul Irishが反論。詳細やりとりはサイトを確認していただければと思いますが、ポイントはコメント欄で交わされている結論かと。

Paul Irish

独立したtransformコントロールを必要とする場合、CSSのみのアプローチではelementのカウントが膨れ上がるので、JavaScriptの方が相当よい結果を残す。それ以外のケースでは、理想的な実装がされているという前提に立てば、両者のパフォーマンスは同程度である。

究極的には、CSSとGSAPのパフォーマンスは基本的に同じで、オーサリングや異なるtransformプロパティをうまく操作できる点ではGSAPが優れている。CSSはバイト数を少なくできるという利点がある。

Karsten Buckstegge

JavaScriptかCSSかは、それ自体はパフォーマンスの差異はあまりなく、どちらを選択しても、実装方法で結果のパフォーマンスが変わってくる。よって、実装方法をどうするかというのが重要な意思決定になる。例えば、物理ロジックや異なるタイムラインなどを伴う複雑なアニメーションをつくるのであれば、JavaScriptの方がうまく対応しやすい。理解しやすいシンプルなアニメーションであれば、CSSの宣言型の構文が向いている。

Jack (GreenSock)

簡単なもので、後方互換性の配慮が不要であれば、CSSがベスト。ロールオーバーの展開やベーシックなステートの変更がしやすい。厄介なのは、最初はシンプルなもので収まるつもりだったのに、そうならないとき。最初からJavaScriptにしておけばよかったということは起こりうる。例えば、一連のアニメーションを構築し、その後、ページ上のアニメーションを一時止めなくてはいけない(もしくは再生スピードを落として止めることになる)ログインのオーバーレイを追加するとする。CSSならコードが複雑になりすぎるが、GSAPなら二行で済む。そのこまでの柔軟性を必要としないのであれば、CSSで問題なし。


2014 Topアクセスランキング


Back