Jank-Free JavaScriptアニメーションの7つのパフォーマンスのヒント

キーポイント

• より良いアニメーションパフォーマンスを取得し、投稿または描画操作をトリガーするCSSプロパティのアニメーションを回避するには、transformやopacityなどの最新のブラウザーによって最適化されたプロパティを使用します。
アニメーション化される要素は、CSS
• 属性を使用して独自のレイヤーに宣伝できますが、これはメモリと管理が必要なため、注意して行う必要があります。 will-change この方法は、ブラウザの最適な時期にアニメーションコードを実行するため、
• をrequestAnimationFrameに置き換えて、ラグのリスクを軽減し、よりスムーズなアニメーションを確保します。 setTimeout/setInterval HTML5キャンバスでの複雑な描画操作の場合、画面外のキャンバスを使用して、画面外のキャンバスですべての描画操作を実行し、各フレームでオフスクリーンキャンバスを描画することでパフォーマンスを向上させます。
Webアニメーションの役割は、単純な装飾効果からユーザーエクスペリエンスにおける特定の役割に進化しました。たとえば、ユーザーがアプリケーションと対話する際に視覚的なフィードバックを提供し、アプリケーションの目標を達成するためにユーザーに焦点を合わせ、視覚的なヒントを提供するための視覚的なヒントを提供するユーザーはアプリケーションインターフェイスなどを理解しています。

これらの重要なタスクに対してWebアニメーションが能力があることを確認するために、ユーザーがアプリケーションで実行しようとすることを妨げるものではなく、ユーザーが援助としてそれを見ることができるように、動きを適切なタイミングでスムーズに実行する必要があることが重要です。

アニメーションのデザインが悪い可能性があります - jankfree.orgによって説明されているjank：

最新のブラウザは、デバイスのリフレッシュレートと同期して画面上のコンテンツを更新しようとします。今日のほとんどのデバイスでは、スクリーンは毎秒60回、つまり60Hzを再リッシュします。画面に何らかの動きがある場合（スクロール、トランジション、アニメーションなど）、ブラウザは毎秒60フレームを作成してリフレッシュレートに合わせて作成する必要があります。 st音とは、Webサイトまたはアプリケーションがリフレッシュレートに追いついていないときにユーザーが見ているst音、ジッター、または簡単な一時停止です。

アニメーションが詰まっている場合、ユーザーは最終的にアプリケーションとやり取りすることがますます少なくなり、成功に悪影響を及ぼします。明らかに、誰もそれを望んでいません。

この記事では、JavaScriptアニメーションの問題を解決し、60fps（1秒あたりのフレーム）の目標を簡単に達成し、ネットワーク上のスムーズな動きを可能にするために、いくつかのパフォーマンスのヒントを収集しました。

1

CSSトランジション/CSSキーフレームまたはJavaScriptを使用してCSSプロパティをアニメーション化することを計画している場合、どのプロパティがページジオメトリを変更するか（レイアウト）を理解します。つまり、ページ上の他の要素の位置を再計算する必要があります。描画操作を伴う - これは非常に重要です。レイアウトと描画タスクは、特にページに複数の要素がある場合、ブラウザの処理が非常に高価です。したがって、操作を投稿または描画するCSSプロパティのアニメーション化を避け、transformやopacityなどのプロパティに固執する場合、最新のブラウザーが最適化されているため、アニメーションパフォーマンスに大幅な改善が見られます。

CSSトリガーでは、最初の変更を含む、各最新のブラウザでトリガーするアクションに関する情報を含むCSSプロパティの最新リストを見つけることができます。

合成操作のみをトリガーするCSSプロパティを変更することは、Webアニメーションのパフォーマンスを最適化するために実行できるシンプルで効果的なステップです。

2は、自分のレイヤーにアニメーション化される要素を上げます（注意してください）アニメーション化される要素が独自のシンセサイザーレイヤーにある場合、一部の最新のブラウザはハードウェアアクセラレーションを使用して作業をGPUにオフロードします。適切に使用すると、これはアニメーションのパフォーマンスにプラスの影響を与える可能性があります。

要素を独自のレイヤーに配置するには、アップグレードする必要があります。 1つの方法は、CSS

プロパティを使用することです。このプロパティにより、開発者は、ブラウザが事前に必要な最適化を行うことができるように、要素にいくつかの変更を加えたいと事前にブラウザに警告することができます。

will-changeただし、あまりにも多くの要素を自分のレイヤーに持ち上げたり、膨張させたりすることはお勧めしません。実際、ブラウザによって作成されたすべてのレイヤーには、メモリと管理が必要であり、高価な場合があります。

Nick SalloumのCSSの紹介でのその利点と短所の使用方法について詳しく知ることができます。

will-change 3を使用します

javaScriptアニメーションは通常、

またはを使用してエンコードされます。 requestAnimationFrame setTimeout/setIntervalコードは次のとおりです

これは機能しますが、遅延のリスクは高く、コールバック関数はフレームのある時点で実行され、最後に1つ以上のフレームが欠落する可能性があるためです。今日、

と呼ばれるスムーズなWebアニメーション（DOMアニメーション、キャンバスなど）に設計されたネイティブJavaScriptメソッドを使用できます。 setInterval() setTimeout()

ブラウザの最適な時期にアニメーションコードを実行します。通常はフレームの先頭にあります。

あなたのコードは次のようになるかもしれません：

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

SitePointでのTim Evkoの「RequestAnimationFrameによる更新パフォーマンス」は、

を使用したエンコードに関する素晴らしいビデオ紹介を提供します。 requestAnimationFrame()

4コードのアニメーションからイベントを分離します 1秒あたり60フレームで、ブラウザはその仕事をするためのフレームあたり16.67mしかありません。あまり時間がないので、コードを合理化することは、アニメーションの流encyさに影響を与える可能性があります。 スクロール、サイズ変更、マウスイベント、および画面の更新を処理するコードからのその他のイベントを処理するコードのデカップリングは、アニメーションコードのパフォーマンスを最適化する良い方法です。 この最適化のヒントと関連するサンプルコードの詳細な議論については、Paul Lewisの作成をチェックしてください。

5

ブラウザは、メインスレッドを使用してJavaScriptを実行し、スタイル計算、レイアウト、描画操作などの他のタスクを実行します。長期にわたるJavaScriptコードは、これらのタスクに悪影響を与える可能性があり、フレームがスキップされ、アニメーションがst音を発生させる可能性があります。そのため、コードを簡素化することは、アニメーションがスムーズに実行されるようにするための素晴らしい方法です。 requestAnimationFrame()

DOMへのアクセスを必要としない複雑なJavaScript操作については、Webワーカーの使用を検討してください。ワーカースレッドは、ユーザーインターフェイスに影響を与えることなくタスクを実行します。

6ブラウザ開発者ツールを使用して、パフォーマンスの問題を制御します ブラウザの開発者ツールは、JavaScriptコードまたはサードパーティライブラリを実行するブラウザの難易度を監視する方法を提供します。また、フレームレートなどに関する実用的な情報も提供します。

Webページを右クリックしてCheck In Contextメニューを選択して、Chrome DevToolsにアクセスできます。たとえば、パフォーマンスツールを使用してWebページを録音すると、そのページのパフォーマンスボトルネックを詳細に理解できます。

「録音」ボタンをクリックして、数秒後に録音を停止します：

この時点で、ページのパフォーマンスを分析するのに役立つ多くのデータが必要です。

このChrome DevToolsガイドは、Chromeブラウザ内のパフォーマンスや他の多くのタイプのデータを分析するために、DevToolsを最大限に活用するのに役立ちます。 Chromeが選択したブラウザでない場合は、今日のほとんどの最新のブラウザには、コードを最適化するために使用できる強力なDevToolsが付属しているため、問題ありません。

7

この手法は、HTML5キャンバスコードの最適化に特に関連しています。

フレームに複雑な描画操作が含まれている場合、変更が発生したときにすべての描画操作を1回または1回だけ行い、各フレームにオフスクリーンキャンバスのみを描画することです。

MDNの最適化キャンバス記事のこのヒントについて詳細な情報とコードの例などを見つけることができます。

結論

コードパフォーマンスの最適化は、今日のネットワークでのユーザーの期待に応えたくない場合に必要なタスクですが、決して簡単ではありません。アニメーションのパフォーマンスの低下にはいくつかの理由があるかもしれませんが、上記のヒントを使用しようとすると、最も一般的なアニメーションパフォーマンストラップを避けて、ウェブサイトまたはアプリのユーザーエクスペリエンスを改善するための大きな一歩を踏み出します。

LagsのないJavaScriptアニメーションのFAQ（FAQ） JavaScriptアニメーションの「st音」の概念は何ですか？

「Stutter」とは、Webサイトまたはアプリケーションがリフレッシュレートに追いついていないときにユーザーが見ているst音、ジッター、または単純な一時停止を指します。 JavaScriptアニメーションでは、フレームレートが毎秒標準60フレームを下回っているときにラグが発生する可能性があります。これにより、スムーズなアニメーションが少なくなり、視覚的に魅力的ではなくなり、ユーザーエクスペリエンスに悪影響を与える可能性があります。

スムーズなJavaScriptアニメーションを確保する方法は？

JavaScriptアニメーションをスムーズにするには、コードを最適化して、1秒あたりの安定した60フレームを維持します。これは、ブラウザがアニメーションを最適化できるようにする

メソッドを使用することで実現できます。また、CSSトランジションまたはアニメーションを使用してシンプルなアニメーションを使用することもできます。これは、一般にJavaScriptよりも効率的であるためです。さらに、レイアウトジッターは、DOMの読み取りおよび書き込み操作を一緒にバッチすることで回避されます。

JavaScriptアニメーションにおけるその役割は何ですか？

JavaScriptのメソッドは、スムーズなアニメーションを作成するための重要なツールです。ブラウザにアニメーションを実行したいことを指示し、ブラウザに指定された関数を呼び出して次の塗り直しの前にアニメーションを更新するように依頼します。この方法により、ブラウザがアニメーションを最適化することができ、よりスムーズで効率的なアニメーションをもたらします。 requestAnimationFrame

なぜCSSの移行またはアニメーションがJavaScriptよりも効率的であるのですか？

requestAnimationFrame CSSの遷移とアニメーションは、ブラウザのシンセサイザースレッドで処理され、メインのJavaScriptスレッドから分離されているため、JavaScriptよりも効率的になる場合があります。これは、メインスレッドが他のタスクで忙しい場合でも、スムーズに実行できることを意味します。さらに、特定のプロパティは、再描画を引き起こすことなくCSSでアニメーション化することができ、特に効率的になります。

レイアウトジッターとは何ですか？また、JavaScriptアニメーションでそれを避ける方法は？ requestAnimationFrame

レイアウトジッターとは、JavaScriptを繰り返しDOMに読み書きすることを指し、ブラウザがレイアウトを複数回再計算し、非効率的でutter音を立てるアニメーションをもたらします。これは、domの読み取りと書き込み操作を一緒にバッチすることで回避できます。たとえば、インターリーブの読み取りと書き込みの代わりに、すべての読み取りを行うことができ、次にすべての書き込みを行うことができます。

will-change属性最適化JavaScriptアニメーションを使用する方法は？

CSSの

プロパティを使用すると、必要になる前に適切な最適化を設定できるように、要素にどのようなタイプの変更を作成するかを事前にブラウザに通知することができます。これにより、アニメーションのパフォーマンスが大幅に向上する可能性があります。ただし、ブラウザが最適化に時間がかかりすぎる可能性があるため、慎重に使用してください。 will-change JavaScriptアニメーションでは、

およびtransformプロパティは何を意味しますか？ opacity

cssの

およびtransformプロパティは、アニメーションに特に効率的です。これは、これらのプロパティの変更を、レイアウトや描画なしでブラウザのシンセサイザースレッドで処理できるためです。これは、メインのJavaScriptスレッドがビジーであっても、スムーズに実行できることを意味します。 opacity

Webワーカーを使用してJavaScriptアニメーションのパフォーマンスを向上させる方法は？

JavaScriptのWebワーカーを使用すると、メインの実行スレッドとは別に、バックグラウンドでスクリプトを実行できます。これは、メインスレッドをブロックして遅延を引き起こすことなく、計算集約型タスクを処理できることを意味します。ただし、DOMやWeb APIにアクセスできないなど、いくつかの制限があります。

「非メインスレッド」アニメーションとは何ですか、JavaScriptアニメーションにどのように利益をもたらしますか？

「非メインスレッド」アニメーションとは、メインのJavaScriptスレッドとは別のスレッドでアニメーションを実行することを指します。これにより、メインスレッドがビジーであってもスムーズに実行できるため、アニメーションのパフォーマンスが大幅に向上する可能性があります。これは、CSSアニメーション、Webワーカー、またはWebアニメーションAPIを使用することで実現できます。

Web Animations APIを使用して効率的なJavaScriptアニメーションを作成する方法は？

Web Animations APIは、CSSアニメーションと同じように効率的に機能するJavaScriptを使用してアニメーションを作成する方法を提供します。 JavaScriptからアニメーションを直接制御および操作できるため、CSSアニメーションよりも柔軟性が高くなります。ただし、これは依然として実験的なテクノロジーであり、すべてのブラウザーで完全にサポートされていません。

以上がJank-Free JavaScriptアニメーションの7つのパフォーマンスのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。