Nowa właściwość kaskadowych arkuszy stylów, uruchamiana w Chromium 85 pozwala skracać czas początkowego ładowania. Jest to możliwe przez pomijanie renderowania treści poza ekranem. Właściwość content-visibility może mieć duży wpływ na poprawę wydajności ładowania strony.

Wprowadzona do CSS właściwość pozwala na pomijanie prac dotyczących układu i malowania, dopóki nie będą potrzebne. Jeśli duża część treści znajduje się poza ekranem, a renderowanie jest opuszczane, to szybciej ładuje się początkowy użytkownik. Ponadto właściwość pozwala na szybsze reakcje z wyświetlanymi na ekranie elementami.

CSS Containment

Celem CSS Containment jest ulepszenie wydajności renderowania treści WWW. Ma to być możliwe przez zapewnienie izolacji poddrzewa DOM od reszty strony. Są cztery typy CSS Containment, a każdy z nich stanowi potencjalną wartość właściwości contain CSS:

• Size — pudełko elementu rozkłada się bez konieczności sprawdzania jego potomków. Jeśli potrzebny jest tylko rozmiar elementu, można potencjalnie pominąć układ elementów potomnych.
• Layout — elementy potomne nie wpływają na zewnętrzny układ innych pól na stronie.
• Style — właściwości, które mają wpływ nie tylko na jego potomków, nie uciekają przed elementem. Pomijamy tym samym obliczanie stylów potomków, jeśli chcemy tylko obliczyć style innych elementów.
• Paint— elementy potomne pola zawierającego nie są wyświetlane poza jego granicami. Nic nie może w widoczny sposób przepełnić elementu. Jednak jeśli element jest poza ekranem lub po prostu jest niewidoczny, jego potomkowie także nie będą widoczni.

Content-visibility i pomijanie renderowania

Ciężko jest ustalić, których właściwości zawierania (containment) użyć. Optymalizacja przeglądarki zadziała tylko wtedy, gdy określi się odpowiedni zestaw. Są dwa możliwe wyjścia – testowanie różnych kombinacji wartości lub skorzystanie z właściwości content-visibility. Druga opcja gwarantuje wzrost wydajności, jaki zapewni przeglądarka, przy jednoczesnym minimalnym wysiłku programisty.

Właściwość auto nowej funkcji CSS zapewnia natychmiastową poprawę wydajności. Element z ustawioną właściwością na auto zyskuje paczki layout, style oraz paint. Elementy znajdujące się poza ekranem, nieistotne dla użytkownika, dostają także z ograniczenia size.

Zasadniczo, jeśli element jest poza ekranem, jego potomkowie nie są renderowani. Przeglądarka określa tylko rozmiar elementu, ale nie uwzględnia jego zawartości. Pomija się większą część procesu renderowania, m.in. stylizację i układ poddrzewa elementu. Ważne jest, że jeśli element się zbliża do rzutni, przeglądarka nie dodaje ograniczenia size. Przez to renderowanie odbywa się w odpowiednim czasie, tak, aby użytkownik w porę zobaczył kolejne elementy.

Przykład wykorzystania content-visibility

Na tym przykładzie można zobaczyć, jak zmienia się wydajność przy wprowadzeniu właściwości content-visibility:auto. Pętla wygląda podobnie w obu przypadkach – przeglądarka pobiera i renderuje fragmenty strony. Jednak w przypadku strony z elementami zawierającymi właściwość, przeglądarka wykona mniejszą ilość pracy przy renderowaniu. Koszty wczytywania spadają nawet o 50% , jeśli przeglądarka wyświetla tylko historie wyświetlane na ekranie, a poza znajdują się puste pola.

W powyższym filmiku widać różnicę w czasie renderowania, z 232 ms do 30 ms. Daje to ponad siedmiokrotny wzrost wydajności.

Podsumowanie

Właściwość content-visibility jest obsługiwana tylko w Chromium 85. Jednak specyfikacja ograniczenia obsługuje się w większości nowoczesnych przeglądarek. Nowa właściwość CSS oraz specyfikacja CSS Containtment Spec pozwoli na wzrost wydajności w projektach CSS.

Źródło: Web.Dev