content-visibilityin Chromium 85 an. Dies sollte die Geschwindigkeit des ersten Ladens und des ersten Renderns auf der Website erheblich beeinflussen. Darüber hinaus können Sie sofort mit dem neu gerenderten Inhalt interagieren, ohne auf das Laden des restlichen Inhalts warten zu müssen. content-visibilityzwingt den Benutzeragenten, Markierungs- und Malelemente zu überspringen, die nicht auf dem Bildschirm angezeigt werden. Tatsächlich funktioniert es wie ein Lazy-Load, nur nicht beim Laden von Ressourcen, sondern beim Rendern.
In dieser Demo
content-visibility: autowird beim Aufteilen von Inhalten eine 7-mal schnellere Rendergeschwindigkeit erzielt
Unterstützung
content-visibilitybasierend auf Grundelementen aus der CSS-Containment- Spezifikation . Während content-visibilitydie Containment-Spezifikation derzeit nur in Chromium 85 unterstützt wird (und in Firefox als "prototypisch" eingestuft wird), wird sie in den meisten modernen Browsern unterstützt.
Arbeitsprinzip
Das Hauptziel von CSS Containment besteht darin, die Renderleistung von Webinhalten zu verbessern, indem eine vorhersehbare Isolierung des DOM-Teilbaums vom Rest der Seite bereitgestellt wird .
Grundsätzlich kann der Entwickler dem Browser mitteilen, welche Teile der Seite als Sammlung von Inhalten gekapselt sind, sodass Browser den Inhalt bearbeiten können, ohne den Status außerhalb des Teilbaums berücksichtigen zu müssen. Der Browser kann das Rendern von Seiten optimieren, indem er weiß, welche Teilbäume isolierten Inhalt enthalten.
Es gibt vier Arten von CSS-Containment, die jeweils als Wert für eine CSS-Eigenschaft dienen
containund mit anderen kombiniert werden können:
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
Es kann verwirrend sein, welche Werte am
containbesten verwendet werden, da Browseroptimierungen nur mit dem richtigen Parametersatz funktionieren können. Es lohnt sich, mit den Werten herumzuspielen, um empirisch herauszufinden, was am besten funktioniert. Besser content-visibilityfür die automatische Abstimmung verwenden contain. content-visibility: autogarantiert den maximal möglichen Leistungsgewinn bei minimalem Aufwand.
Im automatischen Modus erhält die Eigenschaft die Attribute Layout, Stil und Farbe. Wenn das Element die Ränder des Bildschirms verlässt, erhält es die Größe und beendet das Malen und Überprüfen des Inhalts. Dies bedeutet, dass sobald ein Element den Renderbereich verlässt, seine Nachkommen das Rendern beenden. Der Browser erkennt die Abmessungen des Elements, unternimmt jedoch nichts anderes, bis das Rendern erforderlich ist.
Beispiel - Reiseblog
Normalerweise enthält ein Reiseblog mehrere Geschichten mit Bildern und Beschreibungen. Folgendes passiert in einem typischen Browser, wenn ein Reiseblog aufgerufen wird:
- Ein Teil der Seite wird zusammen mit den erforderlichen Ressourcen aus dem Netzwerk geladen
- Der Browser formatiert und platziert alle Inhalte auf der Seite, ohne zwischen sichtbaren und unsichtbaren Inhalten zu unterscheiden
- Der Browser fährt mit Schritt 1 fort, bis alle Ressourcen geladen sind
In Schritt 2 verarbeitet der Browser den Inhalt und sucht nach Änderungen. Es aktualisiert die Stile und das Layout jedes neuen Elements sowie Elemente, die sich aufgrund der Aktualisierungen möglicherweise geändert haben. Dies wird gerendert. Es braucht Zeit.
Stellen wir uns nun vor, was wir
content-visibility: autoauf jeden Blog-Beitrag setzen. Das Basissystem ist das gleiche: Der Browser lädt Teile der Seite herunter und rendert sie. Der Unterschied in der Menge der in Schritt 2.C geleisteten Arbeitcontent-visibilityDer Browser formatiert und platziert den Inhalt, den der Benutzer gerade sieht (auf dem Bildschirm). Bei der Verarbeitung von Off-Screen-Storys überspringt der Browser jedoch das Rendern des gesamten Elements und hostet nur den Container. Die Ladeleistung dieser Seite ist so, als hätte sie Beiträge auf dem Bildschirm gefüllt und Container für jeden Beitrag außerhalb des Bildschirms geleert. Es fällt viel schneller aus und gewinnt bis zu 50% der Ladezeit. In unserem Beispiel sehen wir eine Verbesserung von 232 ms Rendering auf 30 ms, was einer 7-fachen Leistungsverbesserung entspricht.
Was müssen Sie tun, um diese Vorteile nutzen zu können? Zuerst teilen wir den Inhalt in Teile auf:
Danach wenden wir das nachfolgende Styling auf die Teile an:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
Um die potenziellen Vorteile zu verstehen
content-visibility, muss der Browser Größenbeschränkungen erzwingen, um sicherzustellen, dass das Rendern des Inhalts die Abmessungen der Elemente nicht beeinflusst. Dies bedeutet, dass das Objekt so platziert wird, als wäre es leer. Wenn für das Element keine Höhe definiert ist, ist es gleich Null.
Glücklicherweise verfügt CSS über eine weitere Funktion,
contain-intrinsic-sizmit der die tatsächliche Größe eines Elements ermittelt werden kann, wenn es komprimiert wurde. In unserem Beispiel setzen wir die Breite und Höhe auf ungefähr 1000px.
Dies bedeutet, dass es so positioniert wird, als ob es eine einzelne Datei mit "interner Größe" gibt, während sichergestellt wird, dass das div noch Speicherplatz beansprucht.
contain-intrinsic-siz .
Inhalt ausblenden vor content-visibility: hidden
content-visibility: hiddenmacht das, was es content-visibility: automit Offscreen-Inhalten macht. Im Gegensatz zu "Auto" wird der Inhalt jedoch nicht automatisch auf dem Bildschirm gerendert.
Vergleichen Sie dies mit den üblichen Methoden zum Ausblenden von Elementinhalten:
- display: none: Blendet das Element aus und entfernt den Renderstatus. Dies bedeutet, dass das Abrufen eines Artikels dieselbe Last kostet wie das Erstellen eines neuen Artikels.
- Sichtbarkeit: versteckt: Blendet das Element aus und verlässt den Renderstatus. Dadurch wird das Element nicht aus dem Dokument entfernt, da es (und sein Teilbaum) weiterhin geometrischen Platz auf der Seite einnimmt und weiterhin angeklickt werden kann. Außerdem wird der Rendering-Status bei Bedarf aktualisiert, auch wenn er ausgeblendet ist.
content-visibility: hiddenAuf der anderen Seite wird das Element ausgeblendet, während der Renderstatus beibehalten wird, sodass Änderungen nur dann vorgenommen werden, wenn das Element auf dem Bildschirm angezeigt wird.
Fazit
content-visibilityMit der CSS-Containment-Spezifikation können Sie das Rendern und Laden von Seiten ohne komplexe Manipulationen auf reinem CSS erheblich beschleunigen.
Die CSS-Containment- Spezifikation
MDN-
Dokumente zu CSS-Containment- CSSWG-Entwürfen
Die folgenden Informationen wurden bei der Erstellung des Materials verwendet - web.dev/content-visibility
Werbung
Server für Hosting-Sites - das ist unser Epos ! Alle Server "out of the box" sind vor DDoS-Angriffen geschützt. Die automatische Installation eines praktischen VestaCP-Bedienfelds erfolgt automatisch. Versuchen Sie es besser einmal;)
