CSS3 でハードウェア アクセラレーションを有効にする場合の使用法と落とし穴について

この記事では主に、CSS3 でハードウェア アクセラレーションを有効にする場合の詳細な説明と落とし穴を紹介します。内容が非常に優れているので、参考として共有します。

最近、github の iscroll ドキュメントを見ていました。英語ですが、見栄を張るために我慢して読むことはできませんでしたが、著者はよく書いたと思います（これほど長い文書を書く忍耐力があればよかったと思います（顔を覆いました））。そして、より良く見せるために、もう一度読んでみると、CCS3 ハードウェア アクセラレーションが私によって拡張されているなど、多くの良い点を見つけました。みんなで楽しく遊べるように、まず iscroll の Github リンクを添付します: https://github.com/issaxite/iscroll

CSS3 アクセラレーションをオンにしてください

普段書いている css3 アニメーション (ハードウェア アクセラレーションなし)がトリガーされます) ) は、ブラウザーの遅いソフトウェア レンダリング エンジンを使用して実行されます。これは文字通り、ハードウェア アクセラレーションがオンになっていないことを意味します。たとえば、モバイル Web ページに記述されたアニメーション (最も単純なモーダル ボックスなど) が Android スマートフォンでフレーム フリーズする場合があります。これは、アニメーションの実行にブラウザ ソフトウェアのレンダリング エンジンが使用されており、パフォーマンスが追いつかない可能性があります。 。ハードウェア アクセラレーションでこの問題を解決できることは上で述べましたが、パフォーマンスが追いつかない場合は、スパイダーマンに進みます (能力が高いほど、責任も大きくなります)。ハードウェア アクセラレーションを使用してパフォーマンスを向上させます (これがまた悪いことであることはわかっています)。 gag) )、実際には、いわゆるハードウェア アクセラレーションは、レンダリングに GPU を使用し、GPU モードに切り替えて、GPU の一連の機能を発揮するようにブラウザーに指示します。

例:

CSS アニメーション、変換、トランジションは、GPU アクセラレーションを自動的にオンにしませんが、ブラウザーの遅いソフトウェア レンダリング エンジンによって実行されます。パフォーマンスを向上させるために、現時点ではハードウェア アクセラレーションを有効にする必要がある場合があります。では、どうすれば GPU モードに切り替えることができるのでしょうか? 多くのブラウザは、特定のトリガーによる CSS ルールを提供しています。

Chrome、FireFox、Safari、IE9+、および Opera の最新バージョンはすべて、特定の CSS ルールがページ内の DOM 要素に適用されていることを検出すると、最も重要な機能の 3D 変換をオンにします。要素。

他の記事では、GPU モードに切り替えることができるいくつかの 3D 属性を見ました:

.isaax{
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

iscroll ドキュメントで見たのは次のとおりです:

.isaax {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

上記のスタイルはトリガーに使用されると言われていますハードウェアの高速化後、「ページがちらつく可能性がある」という問題が発生します。インターネットで解決する方法が 2 つ見つかりました。

backface-visibility (ie10+) 回転した要素の裏側を隠すために使用されるtranslateZが原因でしょうか? ;

そして、要素に対してパースペクティブ属性が定義されている場合、その子要素はパースペクティブ効果を取得します。

• つまり、フリッカーを除去するのではなく、フリッカーを透明にすることです【技術的すぎて何も言えません】

• 方法2

Webkitカーネルの場合は、別の方法があります解決してください:

.isaax {
   -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;
}

ハードウェア 加速の落とし穴

偉大なマスターの記事を読んだ後、草を握ることは万能薬ではないことに気づきました、それをうまく使用しないと、女性サポーターは平等になります。巨匠の開封例を読んで、改めて深い悪意を感じました。ヘッド内にカルーセル アニメーション要素が存在すると、実際には、その下にあるすべての相対的および絶対的に配置された要素が複合レイヤーに配置されます。 。 。

次に、[Composite Layer] 要素を表示するオプションを開く方法について説明します。上記の記事で説明されている方法は少し古いようです: コンソールを開きます

Layer Borders オプションを確認します。そして、世界が突然クリアになることがわかります。多くの

最後に、ピットをスキップする方法があります

:

アニメーションのパフォーマンスを向上させるために 3D ハードウェア アクセラレーションを使用する場合、z- を追加するのが最善です。これにより、Chrome が不要な複合レイヤーを作成してレンダリング パフォーマンスを向上させることを効果的に削減でき、モバイル最適化効果が特に顕著になります。

.isaax {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 フレキシブルボックスモデルの 2 番目の開発方法について

bootstrap3.0 のグリッド システム原理について

以上がCSS3 でハードウェア アクセラレーションを有効にする場合の使用法と落とし穴についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。