最近では、ハードウェアアクセラレーションを実現するために、コンテンツにこれらのルールを追加することを推奨するWebページがたくさんあります。
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
これはいつもばかげていると私を驚かせました。ハードウェアを高速化することを決定するために、ブラウザが私の助けを必要とするのはなぜですか？もっと速くなるでしょう？では、なぜそれをしないのですか？ブラウザを「だまして」しまうのを待つのはなぜですか？
この質問をする別の方法は、なぜすべてのベースライン/リセットスタイルシートに行が含まれていないのかということです。
* {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
ブラウザがハードウェア アクセラレーションを使用できない、または十分にスマートでないということは、それほど多くありません。代わりに、あなたが言及していることは実際には WebKit にのみ適用され、特に WebKit のモバイル バージョンにのみ適用されます。Firefox と IE はどちらもすべてをハードウェア アクセラレーションし、GPU で合成される「レイヤー」にページを自動的に分割します。そのため、通常、レンダリング速度テストで Chrome を圧倒します。一方、WebKit は、単純なレイヤー アクセラレーション以上のものに実際に適合したことはありません。
Firefox と IE は Windows プラットフォーム (すべての描画操作がハードウェア アクセラレーションを使用) で Direct2D レンダリングを利用できるため、ハードウェア アクセラレーションによる合成も実行できることが本質的な要件でした。合成ではなく描画操作のみを高速化した場合、最初に Direct2D を使用することによる速度の利点のほとんどを失っていたでしょう。これは、GPU とシステム メモリの間で低速なコピーが必要になるためです。一方、私が認識しているすべての WebKit レンダリング バックエンドは、完全にソフトウェアでレンダリングを実行し、合成時に GPU へのコピーのペナルティが発生します (GPU 合成が使用されている場合)。したがって、それはトレードオフになります。合成しているレイヤーが CPU でレンダリングするのにそれほど時間がかからない場合は、そうではありません。
このため、またモバイル GPU の非常に制限された性質のために、絶対に必要な場合 (3D 変換を設定する場合など) を除いて、WebKit ブラウザーはまだ自動ハードウェア アクセラレーションを開始していません。私の意見が必要な場合は、WebKit 開発者とサポート企業の怠惰もここでの要因の一部であると思うことも付け加えておきます。GPU の使用はバグの主な原因であるため、問題を修正するよりも GPU を使用しない方が簡単です。
ちなみに、Android 版 Firefox はいつでも GPU 合成を行うことができますが、about:config; で有効にする必要があるかもしれません。デフォルトでオンになっているかどうかはわかりません。PC の場合は、非常に高速なレンダリングのために Firefox または IE を使用することをお勧めします。
編集: また、Android の最新バージョンでは、Google がハードウェア アクセラレーションを Skia に追加したことも追加する必要があります。これは、OS 上のほぼすべての 2D レンダリングを処理します。現在、これを備えているデバイスはまだ多くありませんが、近い将来、Android のすべてのパフォーマンスが向上することを意味します。とはいえ、彼らの Skia 実装が OpenGL とシームレスに機能するかどうかはわかりません。合成は、処理されるまで余分なコピーが発生する可能性があります。
Webkit アプローチの詳細については、Ariya Hidayat (Webkit レビュアー) が、ブログのハードウェア アクセラレーションと Webkit に関する非常に優れた入門ブログ投稿を書いています。楽しみ。
[オチは、HW アクセラレーションが大量のメモリを消費する可能性があるため、慎重に検討してください。]