CSS3でハードウェアアクセラレーションを有効にするとパフォーマンスが低下するのはなぜですか？

からテストのパフォーマンスへの移行を使用して、css3実験で6000個の小さなdiv要素を移動top: 0しtop: 145pxています。

ハードウェアアクセラレーションを使用しないと、 GoogleChromeでスムーズに実行されます。

ハードウェアを有効にするtranslateZ(0)と、パフォーマンスによるアクセラレーションがひどくなります。

どうしてこんなことに？

これが私のサンプルコードです：http：//dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

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

私はいつも追加します：

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

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

私はあなたの例でテストをしました、そして私が知る限り、それはうまくいきます。

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

2013年8月19日ごとに編集：

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

backface-visibility: hidden;
perspective: 1000;

null変換ハック（translateZ(0)）を追加したときにアニメーションが遅くなった理由は、各null3D変換が新しいレイヤーを作成するためです。これらのレイヤーが多すぎると、ブラウザーが多くのテクスチャをGPUに送信する必要があるため、レンダリングのパフォーマンスが低下します。

この問題は、2013年にAppleのホームページで気づかれ、ヌル変換ハックを悪用しました。http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/を参照してください

OPはまた彼らのコメントの説明に正しく気づきました：

3Dアクセラレーションを使用する場合、3DアクセラレーションされたすべてのレイヤーをGPUに転送して戻す必要があるため、大きなオブジェクトをいくつか移動する方が、小さなアイテムをたくさん移動するよりもパフォーマンスが高くなります。そのため、GPUが適切に機能していても、多くのオブジェクトの転送が問題になる可能性があるため、GPUアクセラレーションを使用する価値がない可能性があります。

面白い。私はいくつかのオプションabout:flags、特にこれらのオプションで遊んでみました：

すべてのページでのGPU合成GPUアクセラレーションレイヤーを含むページだけでなく、すべてのページでGPUアクセラレーションによる合成を使用します。

GPUアクセラレーテッド描画合成が有効になっている場合、ページコンテンツのGPUアクセラレーション描画を有効にします。

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

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

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

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

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

chromeのchrome：// flagsを確認してください。それは言う

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

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

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

また、translateZ（0）は3次元の演算であり、上または左の変更は2次元の演算であると考えてください。

私はあなたに2つのデモを見ました、私はあなたが混乱した理由を知っていると思います：

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

上記、個人的な意見のみ、ありがとうございます！