12

Iv'eは、iPadやその他のタブレット用のウェブアプリを作成しており、適切で効率的なポジショニングとアニメーションに関する限り、多くのビューポートの問題が発生しました。私は最近、すべてのフリーフローティング要素に-webkit-transformを使用するというアイデアを思いつきました。私の質問は、CSS仕様によって提供される変換を使用することは、たとえば要素内のlrtb値を変更するよりも、スムーズで信頼性の高いアニメーションに適してposition:relativeいるでしょうか？ ハードウェアアクセラレーションをオンにすると、特に向きの変更中に、移動する要素でランダムな点滅が発生します。（絶対に配置された要素）それで、注目すべきブログがこの方法を使用していないので、それが悪い考えであるいくつかのプロのヒントの理由があるかどうかを確認したいと思いました。

4

2 に答える 2

14

Lucaのポイントに加えて、ここに、移動オブジェクトと位置オブジェクトのパフォーマンスをテストする2つの投稿があります。

TLDR：

を使用transform: translate(x,y);すると、CSSトランジションのある要素のペイント時間が大幅に増加します。

ただし、position: absolute; top/left遷移のない要素で使用すると高速になります。

移動要素を平行移動で移動することが絶対位置、上/左よりも優れている理由（Paul Irish）：

アニメーションのガイドライン：

  • 可能であれば、CSSキーフレームアニメーションまたはCSSトランジションを使用します。ブラウザは、ここでペイントと合成を最適化できます。

  • JSベースのアニメーションである必要がある場合は、requestAnimationFrameを使用します。setTimeout、setIntervalは避けてください。

  • 可能であれば、すべてのフレームでインラインスタイルを変更しないでください（jQuery animate（）-style）。CSSの宣言型アニメーションは、ブラウザーによってさらに最適化できます。

  • 絶対測位の代わりに2D変換を使用すると、通常、ペイント時間が短くなり、アニメーションがスムーズになるため、FPSが向上します。

  • タイムラインフレームのモードを使用して、動作を遅くしている原因を調査します。「ペイント長方形を表示」および「合成レイヤーの境界線をレンダリング」は、要素がレンダリングされている場所を確認するための優れた方法です。

神話バスティング変換：翻訳vs位置上/左（Tumultブログ）：

主な結論

  • トランジションを使用していない場合、上部/左側のプロパティの設定は、変換を使用するよりも高速になります。

  • ターゲットがWebKitの場合、最速のフレームレートは、translateプロパティでトランジションを使用し、Safari / Mobile Safariのグラフィックアクセラレーションを強制することで実現します（Chromeはこれを自動的に実行します）。

  • 不透明でないアイテムを合成する場合、WebKitでグラフィックスアクセラレーションを強制すると、Safari / Mobile Safariでパフォーマンスが大幅に向上し、Chromeで適度に向上します。

  • 不透明なアイテムのみを合成する場合、WebKitでグラフィックアクセラレーションを強制すると、パフォーマンスに悪影響を及ぼします。

注：モバイルブラウザでGPUで高速化された遷移を確実に行うには、を使用しますtransform: translate3d(0,0,0)。（http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/）

于 2013-08-29T16:46:08.083 に答える
13

位置ではなく変換を使用すると、より優れたパフォーマンスを実現できます。

この優れた記事からいくつか引用しますが、全体像を把握するには、実際にそれを読む必要があります。

http://www.html5rocks.com/en/tutorials/speed/html5/

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

-webkit-transform: translateZ(0);

この背後にある理由は、CPUが実行する必要のある作業の一部をGPUに委任することですが、特にiPadのようなモバイルデバイス、つまり環境では、これが必ずしも価値があるとは限らないため、十分に注意してください。

この変換を適用しても、パフォーマンスが向上することを保証するものではないことに注意してください。それは単にGPUをクランクアップし、より多くのバッテリーを消費しますが、以前と同じパフォーマンスを提供するかもしれません。したがって、この手法には注意して、真のパフォーマンスの向上を経験した場合にのみ使用してください。

于 2012-06-19T13:00:37.977 に答える