84

css3 の実験で 10,000 個の小さな div 要素をブラウザー ビューポートの上部から下部に移動しています。このテストでは、2 つの異なるアプローチを使用します。

  1. translate3D(x, y, z)またはを使用した GPU アクセラレーションtranslateZ(0)
  2. topcss のプロパティを調整するだけで GPU アクセラレーションなし

ハードウェア アクセラレーションを使用しない場合、Google Chrome ではかなりスムーズに動作します。

ハードウェア アクセラレーションを有効にすると、パフォーマンスが大幅に低下します。ボックスが均等に広がっていないのはとても残念です。

GPU/ハードウェア アクセラレーションの場合:

GPU/ハードウェア アクセラレーションなし:

質問

どうしてこんなことに？GPU を使用するとパフォーマンスが向上しますか?

デモ申し込み

https://www.timo-ernst.net/misc/hwtest/

ソース

https://github.com/valnub/hwtest

テストに使用したハードウェア

  • Apple Macbook Pro 15インチ 2015年モデル
  • CPU 2.8 GHz インテル Core i7
  • 16GBのRAM
  • macOS ビッグサー 11.2

更新(2014-11-13): この質問はまだ注目を集めているため、問題自体はまだ存在しているように見えることを指摘したいと思いますが、最新のハードウェアで提供されているデモでは、前述の吃音は表示されない可能性があります。古いデバイスでは、依然としてパフォーマンスの問題が発生する可能性があります。

*更新 II (2021-02-17): 問題は引き続き発生しますが、使用するハードウェアに基づいて、デモで移動するボックスの数を増やす必要があります。デモ アプリの UI を変更したので、移動するボックスの数を調整して、特定のハードウェアのスタッター アニメーションを作成できるようになりました。この問題を再現するには、GPU/ハードウェア アクセラレーションを有効にしてスタッターを確認するのに十分な数のボックスを作成することをお勧めします。次に、ボックスにチェックマークを付けて、加速せずにテストを再度実行します。アニメーションはよりスムーズになるはずです。

4

6 に答える 6

100

私はいつも追加します：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

3D トランスフォームを使用する場合。「偽の」3D 変換も可能です。経験上、特に iPad だけでなく Chrome でも、これら 2 つの行は常にパフォーマンスを向上させます。

私はあなたの例でテストしましたが、私が知る限り、それは機能します。

あなたの質問の「なぜ」の部分については...わかりません。3D 変換は新しい標準であるため、実装は不安定です。そのため、接頭辞付きのプロパティです: ベータ テスト用です。誰かがバグ レポートや質問に記入し、チームに調査してもらうことができます。

2013 年 8 月 19 日あたりの編集:

この回答には定期的な活動があり、IE10にもこれが必要であることがわかり、1時間を失いました。忘れないでください：

backface-visibility: hidden;
perspective: 1000;
于 2012-04-13T00:22:16.167 に答える
6

面白い。about:flagsでいくつかのオプション、具体的には次のオプションを試してみました。

すべてのページでの GPU 合成GPU で高速化されたレイヤーを含むページだけでなく、すべてのページで GPU で高速化された合成を使用します。

GPU 高速描画合成が有効な場合、ページ コンテンツの GPU 高速描画を有効にします。

GPU アクセラレーテッド キャンバス 2Dグラフィックス プロセッサ ユニット (GPU) ハードウェアを使用してレンダリングすることにより、2D コンテキストでキャンバス タグのパフォーマンスを向上させることができます。

それらを有効にして、試してみて、チェックボックスを有効にして惨めに失敗しました（あなたがしたように）。しかし、その後、さらに別のオプションに気付きました。

FPS カウンターハードウェア アクセラレーションがアクティブな場合に、ページの実際のフレーム レートを 1 秒あたりのフレーム数で表示します 。

フラグの説明のハイライトを考えると、上記のオプションがオンになっている FPS カウンターを見たので、チェックボックスにチェックを入れなくても、実際にはハードウェアアクセラレーションがオンになっていると推測します!

TL;DR:ハードウェア アクセラレーションは、最終的にはユーザーの好みです。ダミーで強制すると、translateZ(0)冗長な処理オーバーヘッドが発生し、パフォーマンスが低下したように見えます。

于 2012-04-11T22:41:02.987 に答える
0

私の経験では、GPU はすべての種類のグラフィックスで一般的に高速というわけではありません。非常に「基本的な」グラフィックの場合、遅くなる可能性があります。

画像を回転させていた場合は、異なる結果が得られた可能性があります。これは、GPU が得意とする種類のものです。

また、translateZ(0) は 3 次元の操作であり、上または左の変更は 2 次元の操作であると考えてください。

于 2012-04-15T23:16:27.973 に答える
0

クロムで chrome://flags を確認してください。それは言う

「スレッド化された合成が有効になっている場合、高速化された CSS アニメーションは合成スレッドで実行されます。ただし、コンポジター スレッドがなくても、高速化された CSS アニメーションを実行するとパフォーマンスが向上する場合があります。」

于 2012-04-09T01:51:17.497 に答える
-2

お二人のデモを見ました。あなたが混乱した理由が分かります：</p>

  1. アニメーション要素 左または上を使用して場所を変更しないでください。-webkit-transform を使用してみてください。
  2. すべての子要素は、translateZ () または translate3D を使用するなど、ハードウェア アクセラレーションをオンにする必要があります。
  3. FPS はアニメーションの流暢さを測定し、デモ FPS は平均でわずか 20FPS です。

以上、あくまで個人的な感想です、よろしくお願いします！

于 2013-01-23T03:46:22.287 に答える