2019年05月7日(火)
CSSやJavaScriptのアニメーションをスムーズに表示させるには？コードを軽くしてパフォーマンスを低下させない工夫
カスタムアニメーションは、競合他社の中でウェブサイトを際立たせるのに役立ちますが、最適化されていないアセットは、パフォーマンスの低下問題を起こし、最終的にユーザーを失うことになりかねません。アニメーションかが毎秒60フレーム未満でレンダリングすれば、訪問者は気付き、ユーザーエクスペリエンスは低下してしまうでしょう。ここでは、CSSとJavaScriptのアニメーションをスムーズに実行する方法についてご説明します。
CSSアニメーション対JavaScript アニメーション
JavaScriptで作成されたアニメーションは命令型アニメーションと呼ばれ、CSSアニメーションは宣言型アニメーションと呼ばれることがあります。 CSSアニメーションは、ペイントやスタイリングを担当するメインスレッドではなく、ブラウザのコンポジタースレッドで処理されます。
その結果、アニメーションはメインスレッドなどのタスクの影響を受けません。 もちろん、ペイントまたはレイアウトイベントをトリガーするアニメーションはメインスレッドからの作業を必要とします。こちらではCSSアニメーションを使用する利点が生かされません。
一方、JavaScriptは常にメインスレッドによって実行されます。 JavaScriptではアニメーションをより細かくコ...
0
0
1
4author:
SeleQt（セレキュト）
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。
‹ PREV
フリーランス事業者のよくあるトラブル実例4選 フリーランスに起こりうる問題とは？
NEXT ›
5/15、有名企業のアプリ活用最前線「アプリの虎 Vol.4」東京でイベント開催。今回は小売業の裏側に迫る！
Ads
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。SeleQt（セレキュト）の記事『CSSやJavaScriptのアニメーションをスムーズに表示させるには？コードを軽くしてパフォーマンスを低下させない工夫』についてまとめています。
この記事は特にjavascript・アニメーション・CSS3・jQuery・アイコン・SVG・フォント・Illustrator・Chrome・Firefox・safari・アプリについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のSeleQt（セレキュト）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとSeleQt（セレキュト）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
