88

現在、アニメーションプロジェクトを開始しています。このプロジェクトでは、40000 以上divの s を使用し、それらを繰り返しアニメーション化します。いずれかdivの がパッシブ状態 (つまり、少なくとも 2 秒間アニメーション化されていない) の場合、アニメーションのパフォーマンスを向上させるためにそれらを表示しません。

問題は、どの CSS プロパティがこれに最も適しているかということです。

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

また、fps や GPU 使用率などのレンダリング パフォーマンスを測定するにはどうすればよいですか?

4

8 に答える 8

17

ここにある答えは、最初の質問に答えます (display:noneスペースが完全に折りたたまれている可能性が高いため)。

2 番目の質問ですが、このようなツールはおそらく役に立つでしょう。ただし、40,000 div は多すぎるように思えますが、canvas または SVG を使用した方がパフォーマンスが向上する可能性があります (たとえば、変換、回転、スケーリングなどのアニメーションを処理するKineticJSライブラリを使用します)。

于 2013-02-06T14:13:46.140 に答える
9

ほとんどのブラウザーでペイントとレイアウトをトリガーするため、display:none または visibility:hidden を使用するとパフォーマンスが問題になります。これは、ブラウザーがこれら 2 つの変更のたびにビューポートを再描画することを意味します。それでも期待どおりのパフォーマンスが得られない場合は、webgl チェックで div をレンダリングする html-gl というライブラリを使用して webgl を試すことができますhttps://github.com/PixelsCommander/HTML-GL

于 2016-10-21T16:39:01.347 に答える
6

display:none要素全体を非表示にしてレイアウト スペースから削除しますvisibility:hiddenが、要素を非表示にしますが、以前と同じスペースを占有します。
透明度またはフェード効果を作成する場合は、不透明度を使用できます。

于 2013-02-06T14:14:27.763 に答える
4

display:nonediv はフローから取り出されるため、その位置を計算する必要はありません。

そうは言っても、40000 div はクレイジーに聞こえます。HTML5 キャンバスや SVG などの代替手段を検討しましたか?

于 2013-02-06T14:10:18.703 に答える