it-swarm.com.de

sichtbarkeit: versteckt vs. Anzeige: keine vs.

Ich beginne gerade mit einem Animationsprojekt. Im Projekt habe ich mehr als 40000 divs und animiere sie iterativ. Wenn sich divs im passiven Zustand befindet (d. H. Nicht mindestens 2 Sekunden lang animiert), werden sie nicht angezeigt, um die Animationsleistung zu erhöhen.

Die Frage ist: Welche CSS-Eigenschaft ist dafür am besten geeignet?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

Und wie kann ich die Renderleistung wie fps und gpu-Verbrauch messen?

33
Cihad Turhan

Die Antwort gefunden hier wird Ihre erste Frage beantworten (höchstwahrscheinlich display:none, da der Speicherplatz vollständig reduziert ist).

Zu Ihrer zweiten Frage werden Tools wie this wahrscheinlich für Sie nützlich sein. 40.000 Divs klingen jedoch nach viel zu vielen und Sie werden wahrscheinlich eine bessere Leistung mit Canvas oder SVG erzielen (beispielsweise mit der KineticJS -Bibliothek, da hier Animationen (Transformation, Rotation, Skalierung usw.) für Sie verarbeitet werden.

10
DFM

Sie machen das Element alle unsichtbar, unterscheiden sich jedoch darin, ob es Platz beansprucht und Klicks verbraucht

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

✓: yes
✗: no

Und wenn wir sagen, dass es Klick verbraucht, bedeutet dies auch, dass es andere Zeigerereignisse wie ondblclick, onmousedown, onmousemove usw. verwendet.

Im Wesentlichen verhält sich "Sichtbarkeit: Verdeckt" wie eine Kombination aus "Deckkraft: 0" und "Zeigerereignisse: Keine".

104
Nishant

display:none da die divs dann aus dem flow genommen werden, muss ihre position nicht berechnet werden.

Davon abgesehen klingen 40000 Divs verrückt. Haben Sie die Alternativen wie HTML5-Canvas oder SVG in Betracht gezogen?

4

display:none blendet das gesamte Element aus und entfernt es aus dem Layoutbereich, wohingegen visibility:hidden ein Element verbirgt, aber denselben Platz wie zuvor einnimmt.
Deckkraft kann verwendet werden, wenn Sie Transparenz- oder Überblendeffekte erstellen möchten. 

4
user2035789

Perfomamce ist ein Problem, wenn Folgendes angezeigt wird: Keine oder Sichtbarkeit: Verborgen wird verwendet, da sie in den meisten Browsern Paint und Layout auslösen. Dies bedeutet, dass Ihr Browser den Ansichtsbereich immer dann neu zeichnet, wenn sich diese beiden Änderungen ändern. Daher empfehle ich Deckkraft, aber immer noch für die Anzahl der Divs Auch wenn Sie nicht wie erwartet perfomant sind, können Sie webgl mit einer Bibliothek namens html-gl versuchen, die Ihre Divs in webgl check rendert. https://github.com/PixelsCommander/HTML-GL

2
Elias Bundala

Manchmal benutze ich Sichtbarkeit und Deckkraft, um ein Klickereignis zu vermeiden

z.B. 

normalzustand/Element vom Bildschirm entfernt:

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

hover-Status/Element auf dem Bildschirm:

visibility:visible;
opacity:1;
0
Arlan T