5

私はWebアプリに取り組んでいます。その設計要件の1つは、いくつかの大きなCSS3アニメーションです。

具体的には、<div>ユーザー入力に応じて画面上で遷移する大きな値があります。

アプリの設計方法により、その「コンテンツ」は、背景<div>として設定された大きな静的グラフィック（.jpgや.pngなど）として実装できます。<div>

または、コンテンツを標準のHTMLで実装することもできます。（コンテンツのレイアウト自体は「少し」トリッキーです。いくつかのフローティングまたは配置されたネストされたdiv要素とスパンが必要ですが、クレイジーなことは何もありません。）

私の質問は-どのオプションが最高の（最も滑らかな）アニメーションをもたらす可能性が高いかということです。

（私は明らかにこれを自分でテストできますが、アニメーションの滑らかさを判断するのは難しいことがよくあります。特に、さまざまなデバイスの12の異なるブラウザで、メンテナンスなどの他の考慮事項があることも認識しています。ただし、この場合は、私は完全にアニメーションのパフォーマンスに焦点を当てています。）

ブラウザは、グラフィックの背景を持つ単純なDOM要素、またはグラフィック要素のないより複雑なDOM要素（子が多い）のアニメーション化/レンダリングに一般的に優れているのでしょうか。

また、他のガイドラインはありますか？例えば、

  • ブラウザは特定の種類のグラフィック要素を他の要素よりもうまくアニメーション化しますか？（例：.pngと.jpg）
  • position:absolute子要素が持っている場合、子要素がフロートされている場合、または子要素の位置が通常のドキュメントフローによって決定される場合、ブラウザは要素をより適切にアニメーション化しますか？
  • ネストされた要素の不透明度、ドロップシャドウ、3D変換などは、親要素のアニメーションに悪影響を及ぼしますか？
  • 要素の複雑さに関連してアニメーションのパフォーマンスが低下しますか？たとえば、ネストされたDOM要素のレベルが12の要素は、テキストノードだけの単純な要素よりもスムーズにアニメーション化されませんか？

私はこれらのことについて直感を持っていますが（深くネストされたDOM要素は単純な要素よりもスムーズにアニメーション化されません）、私の直感はしばしば間違っています。ですから、ブラウザで何が機能するかについての「ルール」があるのではないかと思います。

子要素がたくさんある大きな要素をアニメーション化する場合、他に何を考慮する必要がありますか？

4

1 に答える 1

2

答えは、各実装で使用される特定のレンダリング戦略によって異なりますが、WebKitの戦略を「一般的な」戦略として使用しても問題がない場合は、すべての答えがこのドキュメントにあります。

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Webkitツリー構造

最初に、DOMツリーの「RenderObject」クローンが作成されます

この後、ツリーがトラバースされ、各RenderObjectは、最も近い祖先のRenderLayerに組み込まれるか、RenderObjectについて次のいずれかに該当する場合は新しいRenderLayerに組み込まれます。

  • これはページのルートオブジェクトです
  • 明示的なCSS位置プロパティ（相対、絶対、または変換）があります
  • 透明です
  • オーバーフロー、アルファマスク、または反射があります
  • CSSフィルターがあります
  • <canvas>3D（WebGL）コンテキストまたは高速化された2Dコンテキストを持つ要素に対応します
  • <video>要素に対応します

この後、ツリーがトラバースされ、各RenderLayerは、最も近い祖先のGraphicsLayerに組み込まれるか、RenderLayerについて次のいずれかに該当する場合は新しいGraphicsLayerに組み込まれます。

  • レイヤーには3Dまたは透視変換CSSプロパティがあります
  • レイヤーは<video>、高速ビデオデコードを使用する要素 によって使用されます
  • レイヤーは<canvas>、3Dコンテキストまたは高速化された2Dコンテキストを持つ要素によって使用されます
  • レイヤーは合成プラグインに使用されます
  • レイヤーは不透明度にCSSアニメーションを使用するか、アニメーション化されたWebkit変換を使用します
  • レイヤーは高速化されたCSSフィルターを使用します
  • レイヤーには、合成レイヤーである子孫があります
  • レイヤーには、合成レイヤーを持つ低いz-indexの兄弟があります（つまり、レイヤーは合成レイヤーの上にレンダリングされます）

したがって、これが一般的にどのように機能するかを理解し、ここで簡単に説明すると、最初に新しいGraphicsLayerの作成につながるものを最小限に抑え、その後、新しいRenderLayerの作成につながるものを最小限に抑える必要があります。余分なノードが新しいRenderLayersまたはGraphicsLayersの作成につながっていない限り、おそらく大量のDOMノードのネストまたは話していたものをすべて回避できます。

また、ベクトル自体ではなく、DOM要素ベクトルのビットマップイメージを送信することについてのアイデアについても説明します。私はそれがもっと速くなるとは本当に疑っています。PNGまたはJPEGが、ベクトルよりもDOMノードを表すためのより効率的な方法であるということは私にはまったく意味がありません。しかし、ちょっと私はWebkitをコーディングしなかったので、本当に知る唯一の方法はそれをプロファイリングすることだと思います。

于 2013-03-18T14:24:19.227 に答える