Verbessern Sie die anfängliche Ladezeit, indem Sie das Rendern von nicht sichtbaren Inhalten überspringen.
Die
content-visibility
die in Chromium 85 eingeführt wird,
um die Ladegeschwindigkeit
zu verbessern. content-visibility aktiviert die
kann der User-Agent die Rendering-Arbeiten
eines Elements überspringen, einschließlich Layout und Painting,
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 praktisch.
content-visibility: auto auf aufgeteilte Inhaltsbereiche für eine 7-fache Rendering-Leistung beim anfänglichen Ladevorgang. Lesen Sie weiter, um mehr zu erfahren.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 Größenbeschränkung eines Elements wird sichergestellt, dass der Rahmen des Elements ohne die Nachfolgerelemente untersuchen zu müssen. 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, das
content-visibility: auto erhöht die Eindämmung von 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 das Element außerhalb des Bildschirms sichtbar ist, werden seine Nachfolgerelemente nicht gerendert. Der Browser bestimmt die Größe des Elements, ohne alle Inhalte und stoppt dort. Ein Großteil des Renderings, z. B. Stile, und das Layout der Unterstruktur des Elements ü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
<ph type="x-smartling-placeholder">content-visibility: auto auf unterteilte Bereiche auf der linken Seite an. Die Ergebnisse zeigen die Renderingzeiten von 232 ms bis 30 ms beim ersten Seitenaufbau.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:
- Ein Teil der Seite wird zusammen mit allen erforderlichen Ressourcen.
- Der Browser gestaltet den gesamten Inhalt der Seite, ohne ob der Inhalt für Nutzende sichtbar ist.
- 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. Stil und Layout aller neuen Elemente werden aktualisiert, die sich aufgrund neuer Updates verschoben haben. Das wird gerendert arbeiten. Das braucht Zeit.
<ph type="x-smartling-placeholder">
Ü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 ist eine 7-fache Leistungssteigerung.
Welche Arbeit müssen Sie leisten, um von diesen Vorteilen zu profitieren? Erstens: Teilen Sie den Inhalt in Abschnitte auf:
<ph type="x-smartling-placeholder">
story, um content-visibility: auto zu erhalten. Siehe Demo auf CodepenAnschließ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.
Dies ist möglicherweise nicht ideal, da sich die Größe der Bildlaufleiste dass jede Story eine Höhe ungleich null hat.
Glücklicherweise bietet CSS eine weitere Eigenschaft, contain-intrinsic-size, die
gibt effektiv die natürliche Größe des Elements an, wenn das Element in einem
von der Größenbeschränkung betroffen sind. 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 die Inhalte nicht gerendert werden sollen, unabhängig davon, ob sie
angezeigt und gleichzeitig die Vorteile des
im Cache gespeicherten Renderingstatus genutzt werden? Geben Sie Folgendes ein:
content-visibility: hidden
Die content-visibility: hidden-Property bietet dieselben Vorteile wie
nicht gerenderte Inhalte und im Cache gespeicherter Renderingstatus wie bei content-visibility: auto
zu entfernen. 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) das dennoch geometrischen Raum auf der Seite einnimmt und weiterhin angeklickt werden kann. 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 übermäßige Arbeit im Hauptthread beeinträchtigt werden, einschließlich Renderingarbeiten.
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. Dadurch kann der INP-Wert deiner Seite in einigen Situationen verbessert werden.
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 hier: