content-sichtbarkeit: die neue CSS-Eigenschaft zur Steigerung der Rendering-Leistung

Verbessern Sie die anfängliche Ladezeit, indem Sie das Rendern von nicht sichtbaren Inhalten überspringen.

Una Kravets

Jeremy Wagner

Vladimir Levin

Die content-visibility die in Chromium 85 eingeführt wird, um die Ladegeschwindigkeit zu verbessern. content-visibility aktiviert die den User-Agent, um das Rendering eines Elements zu überspringen, einschließlich Layout bis sie benötigt wird. Da das Rendern übersprungen wird, nicht auf dem Bildschirm sichtbar sind, sorgt die content-visibility-Property dafür, dass die anfängliche Ladegröße wesentlich kürzer ist. Sie ermöglicht auch schnellere Interaktionen mit den Bildschirminhalt. Ziemlich cool.

Unterstützte Browser

content-visibility stützt sich auf Primitive innerhalb der CSS-Begrenzung Spezifikation. Während content-visibility nur die derzeit in Chromium 85 unterstützt wird (und Prototyping“ für Firefox) unterstützt, wird die Eindämmungsspezifikation in den modernsten Browser

CSS-Begrenzung

Das Hauptziel der CSS-Begrenzung besteht darin, Leistungsverbesserungen von Webinhalten durch eine vorhersehbare Isolierung der eine DOM-Unterstruktur aus dem Rest der Seite.

Grundsätzlich kann ein Entwickler einem Browser mitteilen, welche Teile der Seite gekapselt sind. als eine Gruppe von Inhalten. So können Browser den Inhalt analysieren, ohne dass Zustand außerhalb der Unterstruktur berücksichtigt werden muss. Zu wissen, welche Inhaltselemente (Unterstrukturen) isolierten Content enthalten, bedeutet, dass der Browser Optimierungen vornehmen kann. für das Seiten-Rendering.

Es gibt vier Arten von CSS-Code Begrenzung, jeweils einen potenziellen Wert für die CSS-Eigenschaft contain, die kombiniert werden kann. in einer durch Leerzeichen getrennten Liste von Werten:

• size: Durch die Begrenzung der Größe eines Elements kann der Bereich des Elements ohne Prüfung der untergeordneten Elemente angeordnet werden. Das bedeutet, dass wir möglicherweise das Layout der Nachfolgerelemente, wenn wir nur die Größe des -Elements.
• layout: Layout-Begrenzung bedeutet, dass die Nachfolgerelemente das Element das externe Layout anderer Felder auf der Seite. Dadurch können wir möglicherweise der Nachfolgerelemente, wenn wir nur andere Felder anlegen möchten.
• style: Durch die Stilbeschränkung wird sichergestellt, dass Eigenschaften, die sich auf wird das Element auch nicht nur für untergeordnete Elemente (z.B. Zähler) maskiert. Dieses können wir die Stilberechnung für die Nachfolgerelemente überspringen, die Stile für andere Elemente berechnen.
• paint: Die Farbeindämmung sorgt dafür, dass die Nachkommen der Verpackung nicht außerhalb der Begrenzungen angezeigt werden. Das Element darf nicht sichtbar überlaufen, Wenn ein Element außerhalb des Bildschirms oder aus anderen Gründen nicht sichtbar ist, werden seine Nachfolgerelemente auch nicht sichtbar sein. Dadurch können wir das Malen der untergeordnete Elemente, wenn das Element nicht sichtbar ist.

Rendering wird mit content-visibility übersprungen

Es kann schwierig sein zu entscheiden, welche Begrenzungswerte verwendet werden, da Browser Optimierungen können nur wirksam werden, wenn ein entsprechender Satz angegeben ist. Sie können verschiedene Werte ausprobieren, um zu sehen, Beste oder du können Sie eine weitere CSS-Eigenschaft namens content-visibility verwenden, um die erforderlichen die Begrenzung automatisch ein. Mit content-visibility erhalten Sie Leistungssteigerungen, die der Browser mit minimalem Aufwand für Sie als Entwickler.

Für die Eigenschaft „Inhaltssichtbarkeit“ sind mehrere Werte zulässig, auto ist jedoch der Wert die sofortige Leistungsverbesserungen zur Folge haben. Ein Element mit content-visibility: auto erhält die Begrenzungen layout, style und paint. Wenn Das Element ist nicht auf dem Bildschirm zu sehen (und ist ansonsten für die Nutzenden nicht relevant, Elemente wären die Elemente mit Fokus oder Auswahl in ihrer Unterstruktur), verbessert auch die Begrenzung von size Malen und Treffertests seines Inhalts).

Was bedeutet das? Kurz gesagt: Wenn sich das Element außerhalb des Bildschirms befindet, werden seine Nachkommen nicht gerendert. Der Browser bestimmt die Größe des Elements, ohne alle Inhalte und stoppt dort. Der Großteil des Renderings, z. B. das Styling und das Layout des untergeordneten Elements, wird übersprungen.

Sobald sich das Element dem Darstellungsbereich nähert, fügt der Browser das size-Element nicht mehr hinzu und beginnt, den Inhalt des Elements zu zeichnen und mit Treffern zu testen. Dieses ermöglicht, dass die Rendering-Arbeit genau rechtzeitig für den Nutzer erledigt wird.

Hinweis zur Barrierefreiheit

Eines der Merkmale von content-visibility: auto besteht darin, dass die Inhalte außerhalb des Bildschirms im Objektmodell des Dokuments und somit in der Baumstruktur für Barrierefreiheit verfügbar bleiben (im Gegensatz zu visibility: hidden). Das bedeutet, dass Inhalte auf der Seite gesucht und aufgerufen werden können, ohne warten zu müssen, bis sie geladen wurden oder die Rendering-Leistung beeinträchtigt wird.

Umgekehrt sind landmark-Elemente mit Stilelementen wie display: none oder visibility: hidden auch außerhalb des Bildschirms im Baum für Barrierefreiheit zu sehen, da der Browser diese Stile erst rendert, wenn sie den Darstellungsbereich erreichen. Damit diese in der Baumstruktur für Bedienungshilfen nicht zu sehen sind und somit für Unordnung sorgen können, musst du auch aria-hidden="true" hinzufügen.

Beispiel: Reiseblog

Ein Reiseblog enthält in der Regel eine Reihe von Geschichten mit wenigen Bildern und einigen beschreibenden Text. Hier sehen Sie, was in einem typischen Browser passiert, wenn Reiseblog:

1. Ein Teil der Seite wird zusammen mit allen erforderlichen Ressourcen.
2. Der Browser gestaltet den gesamten Inhalt der Seite, ohne ob der Inhalt für Nutzende sichtbar ist.
3. Der Browser kehrt zu Schritt 1 zurück, bis alle Seite und Ressourcen heruntergeladen.

In Schritt 2 verarbeitet der Browser den gesamten Inhalt und sucht nach Elementen, die möglicherweise haben sich geändert. Dadurch werden der Stil und das Layout aller neuen Elemente sowie der Elemente aktualisiert, die sich aufgrund neuer Updates möglicherweise verschoben haben. Das wird gerendert arbeiten. Das braucht Zeit.

Überlegen Sie nun, was passiert, wenn Sie content-visibility: auto auf jedes der einzelne Beiträge im Blog. Die allgemeine Schleife ist dieselbe: der Browser. lädt Teile der Seite herunter und rendert sie. Der Unterschied besteht jedoch im wie viel Arbeit es in Schritt 2 erledigt.

Mit der Option „Inhaltssichtbarkeit“ werden alle Inhalte, die angezeigt werden, derzeit für den Nutzer sichtbar (sie sind auf dem Bildschirm). Bei der Verarbeitung der die sich vollständig außerhalb des Bildschirms befindet, überspringt der Browser die Rendering-Arbeit nur das Elementfeld selbst gestalten und gestalten.

Die Leistung beim Laden dieser Seite wäre, als ob sie im Vollbildmodus angezeigt würde. Storys und leere Felder für jede Story, die nicht auf dem Bildschirm zu finden ist. Das bringt viel besser mit einer erwarteten Reduzierung von 50% oder mehr gegenüber den Rendering-Kosten von wird geladen. In unserem Beispiel ist die Renderingzeit von 232 ms auf 30 ms Renderingzeit. Das entspricht einer 7-fachen Leistungssteigerung.

Welche Arbeit müssen Sie leisten, um von diesen Vorteilen zu profitieren? Zunächst Teilen Sie den Inhalt in Abschnitte auf:

Anschließend wenden wir die folgende Stilregel auf die Abschnitte an:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

Natürliche Größe eines Elements mit contain-intrinsic-size angeben

Damit Sie die potenziellen Vorteile von content-visibility voll ausschöpfen können, muss eine Größenbeschränkung anwenden, damit die Rendering-Ergebnisse der Inhalte wirken sich in keiner Weise auf die Größe des Elements aus. Das bedeutet, dass das Element wird so angezeigt, als wäre es leer. Wenn für das Element keine Höhe angegeben ist regulären Blocklayouts, dann hat sie eine Höhe von 0.

Das ist möglicherweise nicht ideal, da sich die Größe der Bildlaufleiste ändert, da jede Story eine nicht nullwertige Höhe haben muss.

Glücklicherweise bietet CSS eine weitere Eigenschaft, contain-intrinsic-size, mit der die natürliche Größe des Elements effektiv angegeben wird, wenn das Element von der Begrenzung der Größe betroffen ist. In unserem Beispiel setzen wir es auf 1000px als eine Schätzung der Höhe und Breite der Abschnitte.

Das bedeutet, dass es so aussieht, als hätte es ein einziges untergeordnetes Element von „intrinsischer Größe“. und achten Sie darauf, dass Ihre unformatierten div-Elemente weiterhin Platz belegen. contain-intrinsic-size fungiert als Platzhaltergröße anstelle von gerenderten Inhalten.

In Chromium 98 und höher gibt es eine neue auto Keyword für contain-intrinsic-size. Wenn angegeben, merkt sich der Browser die zuletzt gerenderte Größe (falls vorhanden) und verwenden Sie diese anstelle des vom Entwickler bereitgestellten Platzhalters Größe. Wenn Sie beispielsweise contain-intrinsic-size: auto 300px angegeben haben, wird der beginnt mit der unveränderlichen Größe 300px in jeder Dimension, aber einmal des Elements gerendert wird, behält es die gerenderte unveränderliche Größe bei. Alle nachfolgenden Änderungen der Rendering-Größe werden ebenfalls gespeichert. In der Praxis bedeutet dies, dass, wenn Sie Ein Element mit angewendetem content-visibility: auto scrollen und dann zurückscrollen nicht auf dem Bildschirm zu sehen ist, behält sie automatisch ihre ideale Breite und Höhe bei zum Platzhalter-Größenanpassung. Diese Funktion ist besonders nützlich für Nutzer mit unendlichem Scrollen, was die Größenschätzung jetzt automatisch verbessern kann, wenn Nutzende die Seite erkundet.

Inhalte mit content-visibility: hidden werden ausgeblendet

Was ist, wenn Sie die Inhalte unabhängig davon, ob sie auf dem Bildschirm angezeigt werden, nicht gerendert lassen möchten, und gleichzeitig die Vorteile des gecachten Rendering-Status nutzen möchten? Geben Sie Folgendes ein: content-visibility: hidden

Mit dem content-visibility: hidden-Attribut haben Sie dieselben Vorteile wie mit content-visibility: auto, wenn nicht gerenderte Inhalte und der gecachte Rendering-Status außerhalb des Bildschirms verwendet werden. Im Gegensatz zu auto beginnt der Aufruf jedoch nicht automatisch auf dem Bildschirm gerendert werden.

So haben Sie mehr Kontrolle, da Sie die Inhalte und und sie später schnell wieder einblenden.

Vergleichen Sie dies mit anderen gängigen Möglichkeiten zum Ausblenden des Inhalts eines Elements:

• display: none: Blendet das Element aus und zerstört seinen Renderingstatus. Dieses bedeutet, dass das Einblenden des Elements genauso teuer ist wie das Rendern eines neuen Elements mit der und denselben Inhalt haben.
• visibility: hidden: blendet das Element aus und behält seinen Renderingstatus bei. Dieses entfernt das Element nicht wirklich aus dem Dokument, da es (und seine Unterstruktur) nimmt dennoch geometrischen Raum auf der Seite ein und kann noch angeklickt werden. Es aktualisiert den Rendering-Status bei Bedarf, auch wenn er ausgeblendet ist.

content-visibility: hidden dagegen blendet das Element aus, während Beibehaltung des Rendering-Status. Wenn es also Änderungen gibt, die erscheinen sie nur, wenn das Element wieder angezeigt wird (d.h. Property „content-visibility: hidden“ entfernt.

Gute Anwendungsfälle für content-visibility: hidden sind die Implementierung von mit erweiterten virtuellen Scrollern sowie das Messlayout. Sie eignen sich auch für Single-Page-Anwendungen (SPAs). Inaktive App-Ansichten können im DOM belassen werden, indem content-visibility: hidden wurde angewendet, um ihre Anzeige zu verhindern, aber ihre im Cache gespeichert. Dadurch kann die Ansicht schnell gerendert werden, wenn sie wieder aktiv wird.

Effects on Interaction to Next Paint (INP)

INP ist ein Messwert, der bewertet, ob eine Seite zuverlässig auf Nutzereingaben reagieren kann. Die Reaktionsfähigkeit kann durch eine übermäßige Arbeitslast im Hauptthread beeinträchtigt werden, einschließlich Rendering-Arbeiten.

Wann immer Sie den Rendering-Aufwand auf einer bestimmten Seite reduzieren können, geben Sie dem Hauptthread die Möglichkeit, schneller auf Nutzereingaben zu reagieren. Dazu gehört auch das Rendering. Die Verwendung der CSS-Eigenschaft content-visiblity kann ggf. das Rendering reduzieren – insbesondere während des Startvorgangs, wenn der Großteil der Rendering- und Layoutarbeit erfolgt.

Das Reduzieren des Renderings wirkt sich direkt auf INP aus. Wenn Nutzer versuchen, mit einer Seite zu interagieren, die die Eigenschaft content-visibility korrekt verwendet, um das Layout und Rendering nicht sichtbarer Elemente zu verschieben, gibst du dem Hauptthread die Möglichkeit, auf wichtige für den Nutzer sichtbare Arbeit zu reagieren. Das kann in einigen Fällen die INP Ihrer Seite verbessern.

Fazit

content-visibility und die CSS-Begrenzungsspezifikationen sorgen für eine beeindruckende Leistung Boosts kommen direkt in Ihre CSS-Datei. Weitere Informationen zu diesen finden Sie unter:

• CSS-Begrenzungsspezifikationen
• MDN-Dokumente in CSS Begrenzung
• Entwürfe für Preisvergleichsportale