Die neue CSS-Eigenschaft, die Ihre Renderleistung verbessert

Verbessern Sie die anfängliche Ladezeit, indem Sie das Rendern von Inhalten außerhalb des Bildschirms überspringen.

5. August 2020

das
Sichtbarkeit von Inhalten

, in Chromium 85 veröffentlicht, könnte eine der leistungsstärksten neuen CSS-Eigenschaften zur Verbesserung der Leistung beim Laden von Seiten sein. Sichtbarkeit von Inhalten Ermöglicht dem Benutzeragenten, das Rendern eines Elements, einschließlich Layout und Malen, bis zur Verwendung zu überspringen. Da das Rendern übersprungen wird, sollten Sie die Vorteile von nutzen, wenn ein großer Teil Ihres Inhalts außerhalb des Bildschirms angezeigt wird Sichtbarkeit von Inhalten beschleunigt das Laden des Erstbenutzers erheblich. Es ermöglicht auch schnellere Interaktionen mit Bildschirminhalten. Gut aussehen.

Browser-Unterstützung

Sichtbarkeit von Inhalten basiert auf Grundelementen innerhalb der die CSS-Containment-Spezifikation. Während Sichtbarkeit von Inhalten unterstützt derzeit nur Chromium 85 (und wird berücksichtigt "Es lohnt sich, einen Prototyp zu machen" für Firefox) wird die Containment-Spezifikation in unterstützt modernste Browser.

CSS-Eindämmung

Das übergeordnete und wichtigste Ziel der CSS-Eindämmung besteht darin, Leistungsverbesserungen für das Rendern von Webinhalten durch Bereitstellung zu ermöglichen vorhersehbare Isolation eines DOM-Bienenstocks vom Rest der Seite.

Grundsätzlich kann ein Entwickler einem Browser mitteilen, welche Teile der Seite als Inhaltssatz gekapselt sind, sodass Browser über Inhalte nachdenken können, ohne den Status außerhalb des Teilbaums berücksichtigen zu müssen. Wenn der Browser weiß, welche Inhalte (Unterbäume) isolierten Inhalt enthalten, kann er Optimierungsentscheidungen für das Rendern der Seite treffen.

Es gibt vier Arten von CSS-Eindämmungjeweils ein potentieller Wert für die enthalten CSS-Eigenschaft, die zu einer durch Leerzeichen getrennten Werteliste kombiniert werden kann:

• Größe: Die Größenbegrenzung eines Elements stellt sicher, dass die Box des Elements platziert werden kann, ohne dass die Nachkommen untersucht werden müssen. Dies bedeutet, dass wir möglicherweise das Design der Nachkommen überspringen können, wenn wir nur die Größe des Elements benötigen.
• Layout: Designkonflikt bedeutet, dass Nachkommen das externe Design anderer Felder auf der Seite nicht beeinflussen. Auf diese Weise können wir möglicherweise das Design der Nachkommen überspringen, wenn wir nur andere Boxen entwerfen möchten.
• Stil: Die Stilbegrenzung stellt sicher, dass Eigenschaften, die Auswirkungen auf mehr als ihre Nachkommen haben können, dem Element nicht entkommen (z. B. Zähler). Auf diese Weise können wir möglicherweise die Stilberechnung für Nachkommen überspringen, wenn wir nur Stile in anderen Elementen berechnen möchten.
• Farbe: Durch die Eindämmung der Farbe wird sichergestellt, dass die Nachkommen des Behälterkastens nicht außerhalb der Grenzen angezeigt werden. Nichts kann das Objekt sichtbar überlaufen lassen, und wenn ein Objekt nicht auf dem Bildschirm angezeigt wird oder nicht sichtbar ist, sind auch seine Nachkommen nicht sichtbar. Auf diese Weise können wir das Malen der Nachkommen möglicherweise überspringen, wenn sich das Element außerhalb des Bildschirms befindet.

Überspringen Sie die Rendering-Arbeit mit Sichtbarkeit von Inhalten

Es kann schwierig sein zu bestimmen, welche Containment-Werte verwendet werden sollen, da Browseroptimierungen nur ausgelöst werden können, wenn ein geeigneter Satz angegeben wird. Sie können mit den Werten spielen, um zu sehen was am besten funktioniert, oder Sie können eine andere CSS-Eigenschaft verwenden, die aufgerufen wird Sichtbarkeit von Inhalten das notwendige Containment automatisch anzuwenden. Sichtbarkeit von Inhalten stellt sicher, dass Sie die höchsten Leistungssteigerungen erzielen, die der Browser als Entwickler mit minimalem Aufwand bieten kann.

Die Eigenschaft für die Sichtbarkeit von Inhalten akzeptiert jedoch mehrere Werte Wagen Es ist dasjenige, das sofortige Leistungsverbesserungen bietet. Ein Gegenstand, der hat
Sichtbarkeit von Inhalten: auto Gewinne Layout, Stil y Farbe Eindämmung. Wenn das Element nicht auf dem Bildschirm angezeigt wird (und für den Benutzer nicht relevant ist, sind die relevanten Elemente diejenigen, deren Unterbaum den Fokus oder die Auswahl enthält), gewinnt es ebenfalls Größe Eindämmung (und stoppt
Malerei
y
Test des Erfolgs
Sein Inhalt).

Was bedeutet das? Kurz gesagt, wenn sich das Element außerhalb des Bildschirms befindet, werden seine Nachkommen nicht gerendert. Der Browser ermittelt die Größe des Elements ohne Berücksichtigung seines Inhalts und stoppt dort. Der größte Teil des Renderings, wie z. B. das Layout und der Stil der Struktur des Elements, wird ignoriert.

Wenn sich das Element dem Ansichtsfenster nähert, fügt der Browser das nicht mehr hinzu Größe
Eindämmung und beginnt zu malen und den Inhalt des Artikels zu testen. Auf diese Weise können Rendering-Arbeiten rechtzeitig ausgeführt werden, damit der Benutzer sie sehen kann.

Beispiel: ein Reiseblog

Ein Reiseblog enthält normalerweise eine Reihe von Geschichten mit einigen Bildern und beschreibendem Text. Dies passiert in einem typischen Browser, wenn Sie zu einem Reiseblog navigieren:

1. Ein Teil der Seite wird zusammen mit den erforderlichen Ressourcen aus dem Internet heruntergeladen.
2. Der Browser entwirft und verteilt den gesamten Inhalt der Seite, unabhängig davon, ob der Inhalt für den Benutzer sichtbar ist.
3. Der Browser kehrt zu Schritt 1 zurück, bis die gesamte Seite und die Ressourcen heruntergeladen sind.

In Schritt 2 verarbeitet der Browser den gesamten Inhalt und sucht nach Änderungen. Aktualisieren Sie den Stil und das Layout neuer Elemente sowie Elemente, die sich möglicherweise aufgrund neuer Aktualisierungen geändert haben. Dies ist Rendering-Arbeit. Das braucht Zeit.

Überlegen Sie nun, was passiert, wenn Sie setzen Sichtbarkeit von Inhalten: auto in jeder der einzelnen Blog-Geschichten. Der allgemeine Zyklus ist der gleiche: Der Browser lädt Fragmente der Seite herunter und zeigt sie an. Der Unterschied besteht jedoch in der Menge an Arbeit, die Sie in Schritt 2 erledigen.

Mit der Sichtbarkeit von Inhalten werden Stil und Layout auf alle Inhalte angewendet, die derzeit für den Benutzer sichtbar sind (auf dem Bildschirm angezeigt werden). Wenn Sie die Story jedoch vollständig außerhalb des Bildschirms rendern, überspringt der Browser die Rendering-Arbeit und wendet nur Stil und Layout auf die Box des Elements an.

Die Leistung beim Laden dieser Seite wäre so, als ob sie vollständige Storys auf dem Bildschirm und leere Kästchen für jede der Storys außerhalb des Bildschirms enthalten würde. Das funktioniert viel besser mit erwartete Reduzierung von 50% oder mehr Kosten für die Wiedergabe. In unserem Beispiel sehen wir einen Impuls von a 232 ms Zeit geben für a
30 ms Zeit rendern. Das ist ein 7 mal Leistung verbessern.

Was ist die Arbeit, die Sie tun müssen, um diese Vorteile zu erhalten? Zunächst teilen wir den Inhalt in Abschnitte ein:

Dann wenden wir die folgende Stilregel auf Abschnitte an:

.story {
 Sichtbarkeit von Inhalten : auto ;
 Contain -Intrinsic-Größe : 1000px;
 }}

Geben Sie die natürliche Größe eines Elements mit an enthalten-intrinsische-Größe

Um die potenziellen Vorteile von zu realisieren Sichtbarkeit von Inhaltenmuss der Browser die Größenbegrenzung anwenden, um sicherzustellen, dass die Renderergebnisse des Inhalts die Größe des Elements in keiner Weise beeinflussen. Dies bedeutet, dass das Element als leer gerendert wird. Wenn das Element in einem regulären Blocklayout keine bestimmte Höhe hat, hat es eine Höhe von 0.

Dies ist möglicherweise nicht ideal, da sich die Größe der Bildlaufleiste je nach Story mit einer Höhe ungleich Null ändert.

Glücklicherweise bietet CSS eine weitere Eigenschaft: enthalten-intrinsische-Größe, die effektiv die natürliche Größe des Elements angibt wenn das Element von Größenkonflikten betroffen ist. In unserem Beispiel setzen wir es auf 1000px als Schätzung der Höhe und Breite der Abschnitte.

Dies bedeutet, dass es mit einem einzigen untergeordneten Element mit der Dimension "Eigengröße" gerendert wird, um sicherzustellen, dass Ihre nicht dimensionierten Divs immer noch Platz beanspruchen.
enthalten-intrinsische-Größe fungiert als Platzhaltergröße anstelle von gerendertem Inhalt.

Inhalt ausblenden mit Sichtbarkeit von Inhalten: versteckt

Was ist, wenn Sie den Inhalt unabhängig davon, ob er auf dem Bildschirm angezeigt wird oder nicht, roh halten möchten, während Sie den zwischengespeicherten Rendering-Status nutzen? Reinkommen:
Sichtbarkeit von Inhalten: versteckt.

das Sichtbarkeit von Inhalten: versteckt Die Eigenschaft bietet Ihnen dieselben Vorteile für Rohinhalt und zwischengespeicherten Status wie Sichtbarkeit von Inhalten: auto tut außerhalb des Bildschirms. Im Gegensatz zu Wagenwird das Rendern nicht automatisch auf dem Bildschirm gestartet.

Dies gibt Ihnen mehr Kontrolle, sodass Sie den Inhalt eines Elements ausblenden und dann schnell anzeigen können.

Vergleichen Sie es mit anderen gängigen Methoden zum Ausblenden von Elementinhalten:

• Anzeige: keine- Blendet das Objekt aus und zerstört seinen Rendering-Status. Dies bedeutet, dass das Anzeigen des Elements genauso teuer ist wie das Rendern eines neuen Elements mit demselben Inhalt.
• Sichtbarkeit: versteckt- Blendet das Element aus und behält seinen Renderstatus bei. Dadurch wird das Element nicht tatsächlich aus dem Dokument entfernt, da es (und sein Teilbaum) weiterhin geometrischen Platz auf der Seite einnimmt und weiterhin anklickbar ist. Außerdem wird der Rendering-Status jederzeit aktualisiert, selbst wenn er ausgeblendet ist.

Sichtbarkeit von Inhalten: verstecktAuf der anderen Seite wird das Element ausgeblendet, während sein Rendering-Status beibehalten wird. Wenn also eine Änderung erforderlich ist, geschieht dies nur, wenn das Element erneut angezeigt wird (d. h. das
Sichtbarkeit von Inhalten: versteckt Eigentum wird entfernt).

Einige großartige Anwendungsfälle für Sichtbarkeit von Inhalten: versteckt Dies ist der Fall, wenn erweiterte virtuelle Shifter implementiert und das Layout gemessen wird.

Fazit

Sichtbarkeit von Inhalten und die CSS-Containment-Spezifikation bedeutet, dass einige interessante Leistungssteigerungen direkt in Ihre CSS-Datei gelangen. Weitere Informationen zu diesen Eigenschaften finden Sie unter: