Rendering performance boost ab Chrome 85. Ermöglicht es dem user agent, die Rendering-Arbeit eines Elements, einschließlich Layout und Paiting zu überspringen, bis sie benötigt wird.

https://www.notion.so/content-visibility-582037349d55442597462ee774cd9d22

content-visibility

• Boost rendering performance
• Ab Chrome 85 verfügbar
• Support nur Chrome 85 aufwärts
• Firefox will es noch einführen
• https://caniuse.com/?search=content-visibility
• Ermöglicht dem user agent, die Rendering-Arbeit eines Elements, einschließlich Layout und Painting, zu überspringen, bis sie benötigt wird
• Da das Rendern übersprungen wird und ein großer Teil Ihres Inhalts außerhalb des Bildschirms angezeigt wird, wird der initial load schneller

Im folgenden beispiel haben wir lila markierten container die Eigentschaft

content-visibility: auto

Die Performance ist in diesem Beispiel bis zu 7x gestiegen

content-visibility hat 3 Werte:

• visible

  → Keine Änderung

• hidden

  → Ein mix zwischen display: none und visibility: hidden. Startet mit display: hidden und wird hinterher visibility hidden

• auto

  → rendert das Element sobald es vom Browser benötigt wird.

  .element {
      content-visibility:auto;
  }

Ohne content-visibility

Mit content visibility

443ms → 415ms → 28ms schneller

content-visibility: the new CSS property that boosts your rendering performance

I made my website 28ms faster with content-visibility 🤓