Ograniczenie CSS w Chrome 52

TL;DR

Nowa właściwość CSS „Pojemność” pozwala programistom ograniczyć zakres stylów, układu i malowania przeglądarki.

Zabezpieczanie CSS. Przed: układ trwa 59,6 ms. Po: układ trwa 0,05 ms

Ma kilka wartości, więc jego składnia jest następująca:

    contain: none | strict | content | [ size || layout || style || paint ]

Możesz ją zainstalować w przeglądarce Chrome w wersji 52 lub nowszej oraz Opera w wersji 40 lub nowszej (i ma publiczne wsparcie w przeglądarce Firefox), więc wypróbuj ją i daj nam znać, jak Ci idzie.

Właściwość wstrzymania

Podczas tworzenia aplikacji internetowej lub nawet skomplikowanej witryny kluczowe wyzwanie w wydajności to ograniczenie efektów stylów, układu i koloru. Często całość interfejsu DOM jest uważana za „zawartą w zakresie” na potrzeby obliczeń, co może oznaczać, że próba samodzielnego „widoku” w aplikacji internetowej może okazać się trudna: zmiany w jednej części DOM mogą wpływać na inne części, a przeglądarki nie da się określić, co powinno być w tym zakresie, a co poza nim.

Załóżmy, że część DOM wygląda tak:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

Dołączasz też do jednego widoku nowy element, który uruchamia style, układ i renderowanie:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

W tym przypadku jednak zakres obejmuje cały DOM, co oznacza, że obliczenia stylu, układu i wyrenderowania będą uwzględniać wszystkie elementy, niezależnie od tego, czy zostały zmienione. Im większy DOM, tym więcej zadań obliczeniowych, co oznacza, że aplikacja może przestać reagować na działania użytkowników.

Na szczęście nowoczesne przeglądarki potrafią sprytnie ograniczać zakres stylów, układu i malowania, co oznacza, że wszystko działa szybciej i nie musisz nic robić.

Jeszcze lepszą wiadomością jest to, że istnieje nowa usługa CSS, którą kontrolują deweloperzy: Containment.

„Pokrywanie kodu CSS” to nowa właściwość słowa kluczowego „zawiera”, która obsługuje 4 wartości:

  • layout
  • paint
  • size
  • style

Każda z tych wartości pozwala ograniczyć ilość czasu renderowania, którą musi wykonać przeglądarka. Przyjrzyjmy się tym bardziej szczegółowo.

Układ (zawiera: układ)

Ograniczenie w układzie jest prawdopodobnie największą zaletą izolacji (w tym contain: paint).

Układ jest zwykle ograniczony do dokumentu, dlatego skaluje się proporcjonalnie do rozmiaru modelu DOM. Jeśli więc zmienisz właściwość left elementu, może być konieczne sprawdzenie każdego elementu w DOM.

Włączenie w tym miejscu izolacji może zmniejszyć liczbę elementów do kilku, a nie całego dokumentu, oszczędzając przeglądarce mnóstwo niepotrzebnej pracy i znacznie poprawiając wydajność.

Farba (zawiera: farba)

Kolejną niezwykle przydatną zaletą izolacji jest użycie farby do malowania ramką. Zasadniczo zabezpieczenie farby powoduje usunięcie danego elementu, ale wiąże się to z kilkoma innymi skutkami ubocznymi:

  • Działa jak blok blokujący dla elementów znajdujących się w pozycji absolutnie i o stałej pozycji. Oznacza to, że wszystkie elementy podrzędne są umieszczane na podstawie elementu z atrybutem contain: paint, a nie żadnego innego elementu nadrzędnego, jak np. dokumentu.
  • Gdy staje się on kontekstem skumulowanym. Oznacza to, że elementy takie jak z-index będą miały wpływ na element, a elementy podrzędne będą układane w stosy według nowego kontekstu.
  • Jest to nowy kontekst formatowania. Oznacza to, że jeśli masz na przykład element na poziomie bloku z blokadą renderowania, będzie on traktowany jako nowe, niezależne środowisko układu. Oznacza to, że układ poza elementem nie ma zwykle wpływu na elementy podrzędne elementu, który go zawiera.

Rozmiar (zawiera: rozmiar)

Co oznacza, że element contain: size oznacza, że elementy podrzędne elementu nie wpływają na rozmiar elementu nadrzędnego i że użyte zostaną wymiary domniemane lub zadeklarowane. Oznacza to, że jeśli ustawisz atrybut contain: size, ale nie określisz wymiarów elementu (bezpośrednio lub za pomocą właściwości Flex), obraz zostanie wyrenderowany na poziomie 0 x 0 pikseli.

Ograniczanie rozmiaru jest tak naprawdę mierzeniem rozmiaru za pomocą paska i nawiasów klamrowych, dzięki czemu nie możesz polegać przy określaniu rozmiaru na podstawie elementów podrzędnych, ale sama w sobie nie przynosi dużych korzyści w zakresie wydajności.

Styl (zawiera: styl)

Ciężko przewidzieć, jaki wpływ na drzewo DOM będzie zmiana stylów elementu, która wpłyną na jego powrót do drzewa. Przykładem może być coś takiego jak liczniki CSS, gdzie zmiana licznika w elemencie podrzędnym może wpłynąć na wartości liczników o tej samej nazwie używanej w innym miejscu w dokumencie. Gdy jest ustawiony atrybut contain: style, zmiany stylu nie są przekazywane poza element, który go zawiera.

Dla jasności: contain: style nie zapewnia stylu ograniczonego dostępu, który jest dostępny w modelu Shadow DOM. Ignorowanie w tym przypadku ma na celu wyłącznie ograniczenie tych części drzewa, które są brane pod uwagę przy mutowaniu stylów, a nie podczas ich zadeklarowania.

Ścisłe i ograniczanie treści

Możesz też łączyć słowa kluczowe, np. contain: layout paint, co spowoduje zastosowanie tylko tych zachowań w danym elemencie. Ten element obsługuje też dwie dodatkowe wartości:

  • contain: strict oznacza to samo co contain: size layout paint
  • contain: content oznacza to samo co contain: layout paint

Stosowanie ścisłego izolacji sprawdza się, gdy znasz rozmiar elementu z wyprzedzeniem (lub chcesz zarezerwować jego wymiary). Pamiętaj jednak, że jeśli zadeklarujesz ścisłe izolację bez wymiarów, z powodu domniemanego ograniczenia rozmiaru element może zostać wyrenderowany jako pole o wymiarach 0 x 0 pikseli.

Z drugiej strony blokowanie treści pozwala znacznie poprawić zakres, ale nie wymaga wcześniejszego znajomości ani określania wymiarów elementu.

Wartość domyślna to contain: content z dwóch. Ścisłe izolację należy traktować jako środek awaryjny, gdy contain: content nie jest wystarczająco silny, aby zaspokoić Twoje potrzeby.

Daj nam znać, jak Ci idzie

Opcja „Izolacja” to świetny sposób na poinformowanie przeglądarki o tym, co powinno być izolowane na stronie. Wypróbuj tę przeglądarkę w Chrome w wersji 52 lub nowszej i daj nam znać, jak Ci idzie.