javascript css - Sichtbarkeit: Versteckt vs Anzeige: Keine vs Opazität: 0





animation performance (7)


Sie alle machen das Element 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 das, dass es auch andere Zeiger-Ereignisse wie ondblclick, onmousedown, onmousemove usw. verbraucht.

Im Wesentlichen verhält sich "visibility: none" wie eine Kombination aus "opacity: 0" und "pointer-events: none".

Ich beginne gerade mit einem Animationsprojekt. In dem Projekt werde ich mehr als 40000 div und sie iterativ animieren. Wenn eines der div Elemente in passivem Zustand ist (dh es wird mindestens 2 Sekunden lang nicht animiert), werde ich sie nicht anzeigen, 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 Rendering-Leistung wie fps, GPU-Nutzung messen?




Manchmal verwende ich Sichtbarkeit und Deckkraft zusammen, um Effekte zu erzielen, um Klickereignisse zu vermeiden

z.B

Normalzustand / Element vom Bildschirm entfernt:

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

Schwebe Zustand / Element auf dem Bildschirm:

visibility:visible;
opacity:1;



display:none weil die divs dann aus dem Flow genommen werden und somit ihre Position nicht berechnet werden muss.

Davon abgesehen klingen 40000 Divs verrückt. Hast du die Alternativen wie HTML5 Canvas oder SVG berücksichtigt?




display:none : belegt keinen Platz, keine Elemente hier.

opacity:0 : belegt Platz, Sie können auf Element dahinter klicken.

visibility:hidden : belegt Platz und Sie können nicht auf Elemente dahinter klicken.




Display: none blendet das gesamte Element aus und entfernt es aus dem Layout-Bereich. Visibility: hidden verbirgt ein Element, nimmt aber den gleichen Platz ein wie zuvor.
Deckkraft kann verwendet werden, wenn Sie Transparenz oder Fade-Effekt erstellen möchten.




Perfomamce ist ein Problem, wenn display: none oder visibility: hidden verwendet wird, da sie in den meisten Browsern malen und layout auslöst, was bedeutet, dass der Browser das Ansichtsfenster immer neu anlegt, also werde ich die Opazität empfehlen, aber für die Anzahl divs immer noch nicht perfekt wie erwartet können Sie Webgl mit einer Bibliothek namens html-gl versuchen, die Ihre divs in Webgl überprüfen https://github.com/PixelsCommander/HTML-GL




String.charAt () ist der Standard und funktioniert in allen Browsern. In Nicht-IE-Browsern können Sie Klammern verwenden, um auf Zeichen zuzugreifen, aber IE unterstützt sie nicht. (Nicht sicher, ob sie das mit den neuesten Versionen implementiert haben).

Wenn jemand wirklich Klammernbenachrichtigung verwenden möchte. Es ist ratsam, die Zeichenfolge in char-Array zu konvertieren, um sie mit jedem Browser kompatibel zu machen.

var testString = "Hello"; 
var charArr = myString.split(''); 




javascript css performance animation render