CSS ハードウェア アクセラレーションを使用して Web サイトのパフォーマンスを向上させる方法を学びましょう_html/css_WEB-ITnose

ブラウザでのレンダリングを向上させるために、CSS のグラフィックス機能を GPU (グラフィックス プロセッシング ユニット) にオフロードすることでハードウェア アクセラレーションできることをご存知ですか?

今日のほとんどのコンピューターには、グラフィック カード用のハードウェア アクセラレーションが搭載されています。したがって、電力を大量に消費するアプリケーションに GPU のエネルギーを利用でき、Web サイトやアプリケーションを CPU 上のブラウザでより高速に実行できます。

この記事では、CSS ハードウェア アクセラレーションをデスクトップ ブラウザーとモバイル ブラウザーに適用します。

デスクトップおよびモバイルブラウザーでの CSS ハードウェアアクセラレーション

一部の CSS アニメーションがブラウザーでどのようにスムーズに実行されるのか疑問に思ったことはありますか?

CSS アニメーション、トランジション、トランジションは自動的に GPU アクセラレーションされず、代わりにブラウザーから削除されますプロセッサーの遅いレンダリング エンジン実行します。では、ブラウザを強制的に GPU モードに切り替えるには、具体的にどのようにすればよいのでしょうか? 多くのブラウザは、特定の CSS ルールを通じて GPU アクセラレーションを提供しています。

現在、Chrome、Firefox、Safari、IE9+、最新バージョンの OPEN などの一部のブラウザーにはハードウェア アクセラレーションが搭載されており、DOM 要素でハードウェア アクセラレーションを使用する必要がある場合にのみ使用されます。

例:

1. .cube {
2. -webkit-transform: translation3d(250px,250px,250px)
3. rotate3d(250px,250px,250px,-120deg)
4. scale3d(0.5, 0.5, 0.5 ) ;
5. }

場合によっては、要素に対して 3D 変換を実行したくないが、それでも GPU アクセラレーションを活用したいことがあります。次に、いくつかの単純な CSS プロパティを使用して、ブラウザーをだまして GPU アクセラレーションをトリガーすることができます。

3D 空間にアニメーション要素を作成しなくても、3D レンダリングを有効にすることができます。少なくとも、「transform:translateZ(0);」は、最新のデスクトップおよびモバイル ブラウザーで GPU アクセラレーションをトリガーすると主張できます。これは、GPU アクセラレーション (すべてのブラウザー プレフィックスを含む) をトリガーする最も効率的な方法と思われます:

1. .cube {
2. -webkit-transform: translationZ(0);
3. -moz-transform: translationZ(0 ) ;
4. -ms-transform: translationZ(0);
5. -o-transform: translationZ(0);
Chrome と Safari では、CSS トランジションやアニメーションを使用すると、ちらつき効果が発生することがあります。 。この問題を解決するには、次の宣言を使用できます:

.cube {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

1. -ms-backface-visibility: hidden ;
2. backface-visibility: hidden;
3. -webkit-perspective: 1000;
4. -moz-perspective: 1000;
5. -ms-perspective: 1000;
/* その他の変換プロパティはこちら */
Webkit エンジンを使用してデスクトップとモバイルのブラウザーの問題を解決すると思われるもう 1 つの方法は、translate3d を使用することです。 0);
-moz-transform:transform3d(0, 0, 0);
-ms-transform:transform3d(0, 0, 0);
transform:transform3d(0, 0, 0 ; .ハードウェア アクセラレーションを使用すると、デバイス上のリソース消費を効果的に削減できるため、モバイル デバイスで特に役立ちます。

概要:

ここで説明したメソッドは、アニメーション化する要素に対してのみ使用してください。これらは 2D アニメーションのパフォーマンスを向上させることができますが、ハードウェア アクセラレーションのためだけにそれらをすべてに適用するのは賢明ではありません。

真のパフォーマンスを体験するために、必要な場合にのみ、それぞれを慎重に使用してください。 GPU を不必要に使用すると、メモリ使用量が増加するため、パフォーマンスに重大な問題が発生する可能性があり、モバイル デバイスのバッテリ寿命にも影響を与える可能性があります。

プロジェクトでこれらのメソッドを使用してみたことがありますか?試したことがある場合は、どれが最も効果的で、最高のパフォーマンスを発揮したかを共有してください。