Schon das Anwenden von content-visibility: auto verbessert die Geschwindigkeit, weil nicht sichtbare Elemente nicht gerendert werden.
Wird für ein Element auto gesetzt, werden aus der CSS-Containment-Spezifikation layout, style und paint angewendet; wenn sich das Element außerhalb des sichtbaren Bereichs befindet, wird auch size angewendet.
→ Befindet es sich außerhalb des sichtbaren Bereichs, werden die Nachfahren dieses Elements überhaupt nicht gezeichnet.
→ Kommt es wieder in die Nähe des sichtbaren Bereichs, entfällt size und das Hit-Testing beginnt.
Mit contain-intrinsic-size kann eine standardmäßig zu zeichnende Größe festgelegt werden. Wenn nichts angegeben ist, ist sie 0.
Wird content-visibility: hidden gesetzt, wird überhaupt nichts gerendert, als läge das Element außerhalb des sichtbaren Bereichs.
→ Das Element wird verborgen und der Rendering-Zustand bleibt erhalten; wenn sich jedoch etwas geändert hat, wird das Rendering angewendet, sobald es wieder sichtbar wird.
→ display:none - Das Element wird verborgen und der Rendering-Zustand zerstört. Wenn es also wieder sichtbar wird, ist das praktisch so, als würde es neu gezeichnet.
→ visibility:hidden - Das Element wird verborgen und der Rendering-Zustand beibehalten. Es wird tatsächlich nicht aus dem Dokument entfernt, das Element belegt weiterhin Platz und kann auch angeklickt werden. Es ist verborgen, wird aber weiterhin gerendert.
Noch keine Kommentare.