[解決済み] visibility:hidden vs display:none vs opacity:0

質問

私は現在、アニメーションのプロジェクトに着手しています。このプロジェクトでは、40000以上の div があり、それらを繰り返しアニメーションさせます。もし、どれかの div が受動的な状態（つまり、少なくとも2秒間はアニメーションしていない）であれば、アニメーションのパフォーマンスを上げるためにそれらを表示しないようにします。

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

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

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

どのように解決するのですか？

答えが見つかりました。 ここで は最初の質問に答えます (最も可能性が高いのは display:none のように完全に折りたたまれます）。

この はおそらくあなたにとって有用でしょう。 しかし、40,000 個の div は多すぎるように思えるので、おそらく canvas や SVG を使用してより良いパフォーマンスを得ることができるでしょう（たとえば KineticJS ライブラリを使用すると、アニメーション（変形、回転、拡大縮小など）を処理することができます。