CSS アニメーションのパフォーマンスの最適化

1. CSS、jquery、canvas を使用してアニメーションを作成します

1. Canvas

利点: 優れたパフォーマンス、強力、ほとんどのブラウザーをサポートします (除く) IE6、IE7、IE8)、描画したグラフィックスは .png または .jpg グラフィックスとして直接保存できます;

欠点: HTML に依存し、グラフィックスはスクリプトを通じてのみ描画でき、アニメーションを実装する API がありません(イベントとタイマー更新に依存); プログラムによってキャンバス上に表示されるテキストは実際にはビットマップであるため、検索クローラーはテキストを完全に無視します。テキストコンテンツもスクリーンリーダーでは認識されません。

2、css3

利点: シンプルでコンテンツから分離されているため、CSS アニメーションはレイアウトとペイントをトリガーしません (これらのプロパティを変更しても、レイアウトとペイントはトリガーされません: 背面の可視性、不透明度、パースペクティブ , パースペクティブ-オリジン, トランスフォーム);

欠点: ブラウザーの互換性の問題があり、Android スマートフォンでは遅延が発生する可能性があり、ページ全体の DOM 構造と密接に関係する植字エンジンによって制限されます。

3. JQuery

利点: 互換性の問題なし

欠点: フレームごとに再描画と再合成が必要です (非常に時間がかかります);

概要: モバイル アニメーション効果の点では、css3 アニメーションを使用する方が jquery アニメーションよりもはるかに効率的です。 Android スマートフォンでのパフォーマンスは特に顕著です。したがって、モバイルアニメーションはCSS3アニメーションを優先し、jqueryはアプリケーションロジックを単純に処理するためにのみ使用できます。 CSS3 アニメーションは、コンテンツのレイアウトに特殊効果を追加するための一般的なソリューションですが、パフォーマンスの低いモバイル ブラウザーでは、レイアウトのパフォーマンスによって制限され、目的の効果を実現できない可能性があります。ゲームなどのパフォーマンスが必要な特定のシナリオでは、キャンバスが大幅に改善されます。

(推奨チュートリアル: CSS Getting Started Tutorial)

2. モバイル端末上で CSS3 がフリーズする

css3 で生成されたアニメーションは ios 66 で動作します, しかしAndroidでは時々ラグが発生します。次の点から問題を探してみるのもよいでしょう。

a. レイアウトが発生するかどうか

発生する場合は、ドキュメント ツリーへの影響を避け、リフローを減らすために、アニメーション要素を可能な限り絶対または固定にしてください。ハードウェア アクセラレーションが有効かどうか

「CSS3 アニメーションを使用する」ことと「ハードウェア アクセラレーションを有効にする」ことは 2 つの別のことですが、前者が後者の原因となる可能性があります。

Webkit でハードウェア アクセラレーションをオンにするための魔法の万能薬があります: opacity: 1; または -webkit-backface-visibility: hidden;。

c. 高コストの属性 (CSS シャドウ、グラデーション、背景添付: 固定など) の有無

そうであれば、画像も選択肢になります。これは、空間を時間と交換する最適化とみなすことができます。

d.再描画領域

その場合はアニメーション領域を減らす必要があります。このステップの最適化には制限があります;

e. 次の例 1 と 2 のように、アニメーションの生成には変換を使用し、高さ、幅、マージン、パディングなどの使用は避けてください。

PS: 変換を使用すると、ブラウザーはこの要素のビットマップを 1 回生成し、アニメーションの開始時に処理するために GPU に送信するだけで済みます。その後、ブラウザはレイアウト、描画、ビットマップ操作の送信を行う必要がなくなります。その結果、ブラウザは GPU の機能を最大限に活用して、さまざまな位置にビットマップをすばやく描画したり、回転や拡大縮小を実行したりできます。つまり、変換アニメーションは GPU によって制御され、ハードウェア アクセラレーションをサポートし、ソフトウェア レンダリングを必要としません

3. アニメーション プロセス中にちらつきが発生します (通常、アニメーションの開始時に発生します)

解決策:

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

Webkit カーネルを備えたブラウザでは、別の効果的な方法は次のとおりです:

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

推奨される関連ビデオ チュートリアル:

css ビデオ チュートリアル

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