content-visibility: nowa właściwość CSS, która zwiększa wydajność renderowania;

Popraw czas wczytywania początkowego, pomijając renderowanie treści poza ekranem.

Jeremy Wagner

Una Kravets

Vladimir Levin

content-visibility dostępna w Chromium w wersji 85, może być jedną z najskuteczniejszych nowych usług porównywania cen dla poprawy wydajności wczytywania strony. content-visibility włącza pomijania renderowania elementu, w tym układu i malowania, do momentu, gdy będzie to potrzebne. Ponieważ znaczna część treści są wyświetlane poza ekranem, wykorzystanie właściwości content-visibility sprawia, że które ładują się znacznie szybciej. Umożliwia też szybsze interakcje treści na ekranie. Dobrze.

Obsługa przeglądarek

Funkcja content-visibility korzysta z elementów podstawowych w klasyfikacji CSS Specyfikacja. content-visibility to tylko obecnie obsługiwane w Chromium 85 (i uważane za wartościowe prototypowanie” dla Firefox), specyfikacja obudowy jest obsługiwana w większości współczesnych .

Pojemnik CSS

Głównym i nadrzędnym celem powstrzymania kodu CSS jest umożliwienie renderowania poprawia wydajność treści internetowych dzięki przewidywalnej izolacji poddrzewa DOM od reszty strony.

Zasadniczo programista może poinformować przeglądarkę, które części strony są umieszczone na stronie. jako zestaw treści, co pozwala przeglądarkom wyciągać wnioski bez poza drzewem podrzędnym. Informacja o tym, które fragmenty treści (drzewa poddrzewa) zawierają odizolowaną zawartość, co oznacza, że przeglądarka może dokonać optymalizacji podczas renderowania stron.

Dostępne są 4 typy CSS izolację, to potencjalna wartość właściwości CSS contain, którą można łączyć na liście wartości oddzielonych spacjami:

• size: ograniczenie rozmiaru elementu umożliwia bez konieczności analizowania jego elementów potomnych. Oznacza to, że możemy potencjalnie pominąć układ elementów podrzędnych, jeśli potrzebujemy tylko rozmiaru .
• layout: ograniczenie układu oznacza, że elementy podrzędne nie mają wpływu na układ zewnętrzny innych pól na stronie. Dzięki temu możemy pominąć układ elementów podrzędnych, jeśli chcemy tylko ułożyć inne ramki.
• style: izolacja stylu zapewnia, że właściwości, które mogą mieć wpływ na więcej niż tylko elementy potomne nie uciekają przed elementem (np. liczniki). Ten pozwala nam potencjalnie pominąć obliczenia stylu w przypadku elementów podrzędnych, jeśli obliczanie stylów dla innych elementów.
• paint: osłabienie farby gwarantuje, że elementy potomne pudełka nie są wyświetlane poza jej granicami. Nic nie może w widoczny sposób wykraczać poza element, a jeśli element jest poza ekranem lub z innego powodu nie jest widoczny, jego elementy potomne również nie będą widoczne. Dzięki temu możemy pominąć malowanie elementów potomnych, jeśli element znajduje się poza ekranem.

Pomijam renderowanie w interfejsie content-visibility

Znalezienie odpowiednich wartości osłabienia może być trudne, ponieważ przeglądarka optymalizacje mogą być włączane dopiero po określeniu odpowiedniego zestawu. Dostępne opcje eksperymentuj z wartościami i sprawdź, co działa, albo Ty możesz użyć innej właściwości CSS o nazwie content-visibility, aby zastosować potrzebne w sposób automatyczny. content-visibility zapewnia największą liczbę wyświetleń zapewnia większą wydajność przeglądarki przy minimalnym nakładzie pracy Google Play.

Właściwość widoczność treści może przyjmować kilka wartości, ale auto to ta natychmiast polepsza wydajność. Element, który ma content-visibility: auto uzyskuje opanowanie layout, style i paint. Jeśli element znajduje się poza ekranem (i nie ma znaczenia dla użytkownika, są to te, które mają fokus lub zaznaczenie w swoim poddrzewie), również potrącenia size (i przerywa malarstwo oraz testowanie trafień jego zawartości).

Co to oznacza? Krótko mówiąc, jeśli element jest poza ekranem, jego elementy potomne są nie wyrenderowano. Przeglądarka określa rozmiar elementu bez uwzględniania i na tym kończy się jego treść. Większość elementów renderowania, np. określanie stylu, i układu podrzędnego drzewa elementu.

Gdy element zbliża się do widocznego obszaru, przeglądarka nie dodaje już interfejsu size i zaczyna malować oraz testować zawartość elementu. Ten umożliwia renderowanie reklam w odpowiednim momencie i widoczne dla użytkownika.

Uwaga na temat ułatwień dostępu

Jedną z funkcji content-visibility: auto jest to, że treści poza ekranem pozostają dostępne w modelu obiektu dokumentu, a tym samym w drzewie ułatwień dostępu (w przeciwieństwie do modelu visibility: hidden). Oznacza to, że można wyszukać na stronie tę treść i do niej przejść bez konieczności czekania na jej załadowanie i bez pogorszenia wydajności renderowania.

Kolejną zaletą takiego rozwiązania jest to, że elementy punktowe z takimi elementami stylu jak display: none czy visibility: hidden również pojawiają się w drzewie ułatwień dostępu poza ekranem, ponieważ przeglądarka nie renderuje tych stylów, dopóki nie znajdą się w widocznym obszarze. Aby zapobiec wyświetlaniu tych elementów w drzewie ułatwień dostępu (i mogą powodować bałagan), dodaj też atrybut aria-hidden="true".

Przykład: blog podróżniczy

Blog podróżniczy zwykle zawiera zbiór artykułów z kilkoma zdjęciami, tekst opisowy. Oto, co dzieje się w typowej przeglądarce, gdy otwiera blog podróżniczy:

1. Z sieci pobierana jest część strony wraz z wszelkimi potrzebnymi i zasobami Google Cloud.
2. Style przeglądarki i rozmieszczanie całej zawartości strony, bez biorąc pod uwagę, czy treść jest widoczna dla użytkownika.
3. Przeglądarka wraca do kroku 1, dopóki wszystkie strony i zasoby nie zostaną pobrano.

W kroku 2 przeglądarka przetwarza całą zawartość, szukając elementów, które mogą uległy zmianie. Aktualizuje styl i układ wszystkich nowych elementów, a także czyli elementów, które mogły się przesunąć w wyniku aktualizacji. To jest renderowane w naszej pracy. To wymaga czasu.

Zastanów się, co się stanie, jeśli umieścisz content-visibility: auto na każdym poszczególne artykuły na blogu. Ogólna pętla jest taka sama: przeglądarka pobiera i renderuje fragmenty strony. Różnica jednak polega na tym, i wiele pracy, które wykonuje w kroku 2.

Dzięki widoczności treści dostosuje ona styl i układ wszystkich treści, aktualnie widoczne dla użytkownika (są widoczne na ekranie). Podczas przetwarzania całkowicie poza ekranem, przeglądarka pomija renderowanie określać styl i układ samego pola elementu.

Wczytywanie tej strony przebiegałoby tak, jakby miałaby całą zawartość ekranu i puste pudełka na opowieści. Zapewnia to dużą skuteczność lepszej jakości, przy spodziewanym obniżeniu kosztu renderowania o co najmniej 50% wczytuję. W naszym przykładzie widzimy wydłużenie czasu renderowania z 232 ms do Czas renderowania wynosi 30 ms. To siedmiokrotny wzrost wydajności.

Co trzeba zrobić, aby osiągnąć te korzyści? Najpierw Podzielić treść na sekcje:

Następnie stosujemy tę regułę stylu do tych sekcji:

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

Określanie naturalnego rozmiaru elementu za pomocą funkcji contain-intrinsic-size

Aby wykorzystać potencjalne zalety content-visibility, przeglądarka musi zastosować ograniczenie rozmiaru, aby zapewnić, że wyniki renderowania treści w żaden sposób nie wpływają na rozmiar elementu. Oznacza to, że element będzie wyglądać tak, jakby był pusty. Jeśli element nie ma określonej wysokości w układzie blokowym, będzie on miał wysokość 0.

Nie jest to idealne rozwiązanie, ponieważ rozmiar paska przewijania będzie się przesunął, który ma wysokość inną niż zero.

Na szczęście CSS udostępnia kolejną właściwość contain-intrinsic-size, która skutecznie określa naturalny rozmiar elementu, jeśli jest to ze względu na ograniczenie rozmiaru. W naszym przykładzie ustawiamy ją na 1000px jako aby oszacować wysokość i szerokość sekcji.

Oznacza to, że będzie wyglądał tak, jakby miał jedno dziecko o „rozmiarze wewnętrznym” aby elementy div bez odpowiednich rozmiarów zajmowały miejsce. contain-intrinsic-size działa jako rozmiar obiektu zastępczego zamiast renderowanych treści.

W Chromium 98 i nowszych wersjach dostępna jest nowa funkcja auto słowo kluczowe dla grupy reklam contain-intrinsic-size. Po podaniu tego ustawienia przeglądarka zapamięta: rozmiaru ostatnio wyrenderowanego (jeśli ma miejsce) i użyj tego zamiast obiektu zastępczego dostarczonego przez dewelopera. rozmiaru. Na przykład jeśli podasz contain-intrinsic-size: auto 300px, parametr element na początku będzie miał rozmiar wewnętrzny 300px w każdym wymiarze, ale raz podczas wyrenderowania zawartości elementu zachowa on wyrenderowany rozmiar wewnętrzny. Wszystkie późniejsze zmiany rozmiaru renderowania zostaną także zapamiętane. W praktyce oznacza to, że przewiń element z zastosowaną wartością content-visibility: auto, a następnie przewiń z powrotem automatycznie zachowa swoją idealną szerokość i wysokość i nie zostanie przywrócona do rozmiaru zastępczego. Ta funkcja jest szczególnie przydatna w przypadku osób przewijających nieskończoność ekranu, co może teraz automatycznie poprawiać szacowane rozmiary w miarę upływu czasu, przegląda stronę.

Ukrywanie treści w aplikacji content-visibility: hidden

Co zrobić, jeśli treść nie ma być renderowana niezależnie od tego, czy jest jest na ekranie, a jednocześnie wykorzystuje zalety stanu renderowania w pamięci podręcznej? Wpisz: content-visibility: hidden

Usługa content-visibility: hidden zapewnia te same korzyści nierenderowana treść i stan renderowania w pamięci podręcznej zgodnie z wartością content-visibility: auto W przeciwieństwie do auto nie uruchamia jednak automatycznie nie są renderowane na ekranie.

Daje to większą kontrolę, umożliwiając ukrycie zawartości elementu oraz później szybko je odkryć.

Porównaj to z innymi typowymi sposobami ukrywania zawartości elementu:

• display: none: ukrywa element i niszczy jego stan renderowania. Ten oznacza, że odkrycie elementu jest tak samo kosztowne jak renderowanie nowego elementu za pomocą atrybutu te same treści.
• visibility: hidden: ukrywa element i zachowuje stan renderowania. Ten nie usuwa elementu z dokumentu, ponieważ to on (i to drzewo podrzędne). nadal zajmuje geometryczną przestrzeń na stronie i nadal można ją kliknąć. it aktualizuje stan renderowania w każdej chwili, nawet jeśli jest ukryty.

content-visibility: hidden z kolei ukrywa element, podczas gdy zachowywanie stanu renderowania, więc w razie jakichkolwiek zmian wymagających mają miejsce tylko wtedy, gdy element wyświetla się ponownie (tj. Usunięto właściwość content-visibility: hidden).

content-visibility: hidden często stosuje się, gdy implementujesz z zaawansowanymi wirtualnymi przewijakami i pomiarami układu. Sprawdzają się też w przypadku: aplikacji jednostronicowych (SPA). Nieaktywne widoki aplikacji można pozostawić w DOM za pomocą Aplikacja content-visibility: hidden została zastosowana, aby uniemożliwić wyświetlanie, ale zachować stanu w pamięci podręcznej. Dzięki temu widok będzie szybko renderowany, gdy znów stanie się aktywny.

Wpływ na interakcję do kolejnego wyrenderowania (INP)

INP to wartość, która określa zdolność strony do niezawodnego reagowania na dane wejściowe użytkownika. Na czas reakcji może wpływać nadmierna ilość pracy w wątku głównym, w tym prace związane z renderowaniem.

Gdy tylko możesz skrócić czas renderowania na danej stronie, dajesz wątekowi głównemu możliwość szybszego reagowania na dane wejściowe użytkownika. Obejmuje to pracę nad renderowaniem, a w razie potrzeby używanie właściwości CSS content-visiblity może skrócić czas renderowania – szczególnie podczas uruchamiania, gdy wykonuje się większość działań związanych z renderowaniem i układem.

Skrócenie procesu renderowania ma bezpośredni wpływ na wartość INP. Gdy użytkownicy próbują prawidłowo korzystać ze strony, która używa właściwości content-visibility, aby opóźnić układ i renderowanie elementów spoza ekranu, dajesz wątek główny szansę na reagowanie na kluczowe działania widoczne dla użytkownika. Może to w niektórych sytuacjach poprawić wartość INP strony.

Podsumowanie

content-visibility i specyfikacja opakowań CSS zapewniają świetne wyniki doładowania pojawiają się bezpośrednio w pliku CSS. Więcej informacji na temat tych właściwości, zapoznaj się z:

• Specyfikacja obudowy CSS
• Dokumenty MDN w usłudze porównywania cen Ukrycie
• Wersje robocze CSSWG