8

CSS 3D 変換は Mobile Safari でハードウェア アクセラレーションされるとよく​​言われますが、これは 2D 変換がそうではないという意味でしょうか? 基本的にすべて 3D 変換として実装できるため、そうしない理由は思いつきませんが、確実に知りたいと思います。

2D 変換がハードウェア アクセラレーションではないことが判明した場合は、その理由についての洞察をいただければ幸いです。

4

1 に答える 1

15

そうです、CSS 2D 変換は Mobile Safari ではハードウェア アクセラレーションされませんが、3D 変換はハードウェア アクセラレーションされます。なぜそうなのかはわかりませんが、おそらくほとんどの 2D 変換ではやり過ぎだと判断したのでしょう。GPU を不必要に使用すると、バッテリー寿命に悪影響を及ぼす可能性があります。

2D 変換を 3D 変換に変換するのは非常に簡単なので、それほど問題にはなりません。1 つのトリックは、ここで説明されているように translateZ(0) を使用することです: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

編集

Apple はドキュメントでそれについて何も述べていないため、信頼できる情報源を入手することは困難です。これについて、Apple のディーン ジャクソン氏は次のように述べています ( http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/から)。

基本的に、関数の 1 つとして 3D 操作を持つ変換は、実際の変換が 2D である場合や、何も実行しない場合 (translate3d(0,0,0) など) であっても、ハードウェア合成をトリガーします。これは単なる現在の動作であり、将来変更される可能性があることに注意してください (そのため、これを文書化したり推奨したりしません)。ただし、状況によっては非常に役立ち、再描画のパフォーマンスを大幅に向上させることができます。

Sencha の Ariya Hidayat が、モバイル ブラウザーのハードウェア アクセラレーションについて説明する投稿を書きました: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/。投稿のスニペットは次のとおりです。

CSS 変換マトリックスを translate3d または scale3d に設定するベスト プラクティス (3-D は関係ありませんが) は、これらのタイプのマトリックスがアニメーション化された要素を切り替えて独自のレイヤーを持つという事実から来ています。 Web ページの残りの部分と他のレイヤー。ただし、レイヤーの作成と合成にはコスト、つまりメモリ割り当てが伴うことに注意してください。ハードウェア アクセラレーションのために Web ページのすべての小さな要素をやみくもに合成するのは賢明ではありません。メモリを食い尽くすことになります。

ハードウェア アクセラレーションについて説明している html5rocks.com の記事は次のとおりです: http://www.html5rocks.com/en/tutorials/speed/html5/。ここにその抜粋があります：

現在、ほとんどのブラウザーは、HTML 要素が GPU アクセラレーションの恩恵を受けるという強い兆候がある場合にのみ、GPU アクセラレーションを使用します。最も強い兆候は、3D 変換が適用されたことです。3D 変換を実際に適用したくない場合でも、GPU アクセラレーションの利点を得ることができます - 問題ありません。恒等変換を適用するだけです:

-webkit-transform: translateZ(0);

Firefox と Internet Explorer は既に 2D 変換にハードウェア アクセラレーションを使用しているため、近い将来 WebKit ブラウザー (Chrome、Safari) にハードウェア アクセラレーションが含まれていても驚かないでしょう。

于 2012-04-05T22:31:11.367 に答える