CSS3でハードウェアアクセラレーションを有効にするとパフォーマンスが低下するのはなぜですか？
_top: 0_から_top: 145px_への遷移を使用して、パフォーマンスをテストするcss3実験で6000個の小さなdiv要素を移動しています。
noハードウェアアクセラレーションを使用すると、Google Chromeでスムーズに実行されます。
translateZ(0)経由でハードウェアアクセラレーションを有効にすると、パフォーマンスがひどくなります。
どうしてこんなことに？
コードの例を次に示します。 http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
Update（2014-11-13）：この質問はまだ注目を集めています言及されたst音は、現在のハードウェアで提供されているデモではもはや見えないかもしれませんが、問題自体はまだ存在しているように見えることを指摘したいと思います。古いデバイスでもパフォーマンスの問題が引き続き発生する可能性があります。
私は常に追加します：
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
3D変換を使用する場合。 「偽物」の3D変換でさえも。経験によれば、これらの2つのラインは、特にiPadだけでなくChromeでも常にパフォーマンスを改善します。
私はあなたの例でテストしました、そして私が知る限り、それは動作します。
あなたの質問の「なぜ」部分については…わかりません。 3D変換は新しい標準なので、実装は不安定です。これが、ベータテスト用の接頭辞付きプロパティである理由です。誰かがバグレポートや質問に記入して、チームに調査してもらうことができます。
2013年8月19日編集：
この回答には定期的なアクティビティがありますが、IE10にもこれが必要であることがわかったので、私は1時間を失いました。忘れないでください：
backface-visibility: hidden;
perspective: 1000;
null transform hack （translateZ(0)）を追加したときにアニメーションが遅くなった理由は、null 3D変換ごとに新しいレイヤーが作成されるためです。これらのレイヤーが多すぎると、ブラウザーがGPUに多くのテクスチャを送信する必要があるため、レンダリングパフォーマンスが低下します。
この問題は2013年にAppleのホームページで発見され、null変換ハックを悪用しました。 http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/ を参照してください
また、OPは コメント の説明に正しく気付きました。
3Dアクセラレーションを使用する場合、すべての3DアクセラレーションレイヤーをGPUに転送して戻す必要があるため、少数の大きなオブジェクトを移動すると、多くの小さなアイテムを移動するよりもパフォーマンスが向上します。そのため、GPUがうまく機能していても、多くのオブジェクトの転送が問題になる可能性があるため、GPUアクセラレーションを使用しても価値がない場合があります。
面白い。 _about:flags_のいくつかのオプション、特にこれらのオプションを試してみました：
すべてのページでのGPU合成 GPU加速レイヤーを含むページだけでなく、すべてのページでGPU加速合成を使用します。
GPU Accelerated Drawing合成が有効な場合、ページコンテンツのGPU加速描画を有効にします。
GPU Accelerated Canvas 2Dグラフィックプロセッサユニット（GPU）ハードウェアを使用してレンダリングすることにより、2Dコンテキストのキャンバスタグのパフォーマンスを向上させます。
それらを有効にし、試してみましたが、ティックボックスを有効にした状態で惨めに失敗しました（あなたがやったように）。しかし、私はさらに別のオプションに気付きました：
FPSカウンターページの実際のフレームレートをフレーム/秒で表示します。ハードウェアアクセラレーションがアクティブな場合。
フラグの説明のハイライトを考えると、上記のオプションがオンになっているFPSカウンターを見たので、チェックボックスをオンにしなくても、実際にはハードウェアアクセラレーションがオンになっていると推測します。
TL; DR：ハードウェアアクセラレーションは、最終的にはユーザー設定です。ダミーtranslateZ(0)で強制すると、冗長な処理オーバーヘッドが発生し、パフォーマンスが低下します。
Chromeのchrome：// flagsを確認してください。それは言います
「スレッド化された合成が有効な場合、加速されたCSSアニメーションは合成スレッドで実行されます。ただし、合成スレッドなしでも、加速されたCSSアニメーションで実行するとパフォーマンスが向上する場合があります。」
私の経験では、GPUは一般にあらゆる種類のグラフィックスに対して高速ではありません。非常に「基本的な」グラフィックスの場合、遅くなる可能性があります。
画像を回転させた場合、異なる結果が得られた可能性があります-それは、GPUが得意とする種類のことです
また、translateZ（0）は3次元の操作であり、上または左の変更は2次元の操作であることも考慮してください。