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.

Una Kravets

Jeremy Wagner

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. Bardzo fajnie.

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 przeglądarek. .

Ograniczenie do usługi porównywania cen

Głównym i nadrzędnym celem powstrzymania CSS jest włączenie 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.

Istnieją 4 typy obejmu treści w CSS, z których każdy 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: ograniczenie stylu zapewnia, że właściwości, które mogą mieć wpływ na więcej niż tylko na jego potomków, nie wydostają się poza element (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 atrybuty content-visibility: auto, zyskuje atrybuty 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 jego zawartości. Pomijana jest większość renderowania, np. stylizacja i układ poddrzewa elementu.

Gdy element zbliża się do widocznego obszaru, przeglądarka przestaje dodawać ograniczenie size i zaczyna wyświetlać 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. Przeglądarka stylizuje i układa wszystkie treści strony bez uwzględniania tego, czy są one widoczne dla użytkownika.
3. Przeglądarka wraca do kroku 1, aż wszystkie strony i zasoby zostaną pobrane.

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.

W przypadku widoczności treści styl i układ będą dotyczyć wszystkich treści, które są obecnie widoczne dla użytkownika (znajdują się 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. Ta metoda działa znacznie lepiej, ponieważ oczekujemy zmniejszenia kosztów renderowania o co najmniej 50%. W naszym przykładzie czas renderowania skrócił się z 232 ms do 30 ms. To siedmiokrotny wzrost wydajności.

Jakie działania należy wykonać, aby skorzystać z tych 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 jeśli przewiniesz element z zaaplikowanym content-visibility: auto, a potem przewiniesz go z powrotem poza ekran, zachowa on automatycznie idealną szerokość i wysokość, a nie wróci do rozmiaru placeholdera. 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ę.

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ść pracy związanej 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 ograniczania treści w pliku CSS oznaczają, że w Twoim pliku CSS pojawią się nowe, ciekawe funkcje. Więcej informacji o tych właściwościach znajdziesz w tych dokumentach:

• Specyfikacja obudowy CSS
• Dokumentacja MDN na temat ograniczania CSS
• Wersje robocze CSSWG