web-dev-qa-db-ja.com

可視性：非表示vs表示：なしvs不透明度：0

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

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

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

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

javascriptcssperformanceanimationrender
47
Cihad Turhan

見つかった答え here は最初の質問に答えます（ほとんどの場合display:noneスペースが完全に縮小されるため）。

2番目の質問に対して、 this などのツールがおそらく役立つでしょう。 ただし、40,000 divは多すぎるように聞こえ、おそらくキャンバスまたはSVGを使用するとパフォーマンスが向上します（たとえば、 KineticJS ライブラリを使用すると、アニメーション、変換、回転、スケールなどが処理されます） 。

12
DF_

それらはすべて要素を非表示にしますが、スペースを占有してクリックを消費するかどうかは異なります

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

そして、クリックを消費すると言うと、ondblclick、onmousedown、onmousemoveなどの他のポインターイベントも消費します。

本質的に、「可視性：隠された」は、「不透明度：0」と「ポインターイベント：なし」の組み合わせのように動作します。

140
Nishant

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

そうは言っても、40000 divはおかしく聞こえます。 HTML5キャンバスやSVGなどの代替手段を検討しましたか？

4
Fabian Schmengler

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

4
user2035789

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

2
Elias Bundala

いつか可視性と不透明度を一緒に使用して、クリックイベントを回避する効果を実現する

例えば.

画面から削除された通常の状態/要素：

visibility:hidden;
opacity:0;
transition: all .3s;

画面上のホバー状態/要素：

visibility:visible;
opacity:1;
0
Arlan T