30.9.2020 |

content-visibility

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

https://webdev.imgix.net/content-visibility/demo.jpg

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

https://res.cloudinary.com/practicaldev/image/fetch/s--3v4V-T1H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600617553251/eXoyruH_a.png

Mit content visibility

https://res.cloudinary.com/practicaldev/image/fetch/s--3A-Wul7g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600617628097/TnFz-bqnQ.png

443ms → 415ms → 28ms schneller

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

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

Zur Übersicht
Umut Tufanoglu

Mehr vom Devsquad...

Jan Sauer

Neuralink your Brain 🧠

Jonathan Zbick

AWS Secrets Manager

Hallo, ich bin Jörg Herbst!

Ich bin der CEO von newcubator und freue mich über jede Nachricht!

* Pflichtfeld