Ograniczenie CSS w Chrome 52

TL;DR

Nowa właściwość CSS Containment pozwala programistom ograniczyć zakres stylów, układów i pracy malarskiej przeglądarki.

Przechowywanie CSS. Przed: układ zajmuje 59,6 ms. Po: układ zajmuje 0,05 ms

Zawiera on kilka wartości, dzięki czemu jego składnia wygląda tak:

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

Jest dostępna w Chrome 52 i nowszych oraz Opera 40 i nowszych (oraz obsługa publiczna przez Firefoksa), więc wypróbuj ją i daj nam znać, jak Ci idzie.

Właściwość „zawiera”

Podczas tworzenia aplikacji internetowej, a nawet skomplikowanej witryny, kluczowym wyzwaniem dla wydajności jest ograniczenie wpływu stylów, układu i lakieru. Całość DOM jest często uważana za „w zakresie” obliczeń, co 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ądarka nie ma możliwości określenia, co powinno w nim być.

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

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

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

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

Do jednego widoku dołączasz nowy element, który aktywuje style, układ i wyrenderowanie:

    <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 takim przypadku jednak zakres obejmuje cały DOM, co oznacza, że obliczenia stylu, układu i malowania będą musiały uwzględniać wszystkie elementy niezależnie od tego, czy zostały zmienione. Im większy jest DOM, tym więcej zadań wymaga obliczeń, co oznacza, że aplikacja może nie reagować na dane wejściowe użytkownika.

Dobrą wiadomością jest to, że nowoczesne przeglądarki naprawdę inteligentnie ograniczają zakres stylów, układu i malowania, dzięki czemu wszystko działa szybciej, a Ty nie musisz nic robić.

Jeszcze lepszą wiadomość jest to, że pojawiła się nowa właściwość CSS, która przekazuje deweloperom kontrolę zakresu: Container.

CSS „Container” to nowa właściwość zawierająca słowo kluczowe, która obsługuje 4 wartości:

  • layout
  • paint
  • size
  • style

Każda z tych wartości pozwala ograniczyć czas renderowania, jaki musi wykonać przeglądarka. Przyjrzyjmy się im dokładniej.

Układ (zawiera: układ)

Ograniczenie układu jest prawdopodobnie największą zaletą izolacji, jeśli chodzi o contain: paint.

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

Włączenie w tym miejscu funkcji ograniczania może potencjalnie zmniejszyć liczbę elementów do zaledwie kilku, a nie do całego dokumentu. Dzięki temu przeglądarka oszczędzi mnóstwo niepotrzebnej pracy i znacznie poprawi wydajność.

Barwiony (zawiera: farba)

Kolejną niezwykle przydatną zaletą zastosowania farby w zakresie kolorów jest efekt izolacji. Ogólnie rzecz biorąc, farba w zasadzie wycina element, którego dotyczy problem, ale ma też kilka innych efektów ubocznych:

  • Działa jak blok nadrzędny w przypadku bezwzględnych i stałych elementów pozycji. Oznacza to, że elementy podrzędne są ustalane na podstawie elementu z atrybutem contain: paint, a nie żadnych innych elementów nadrzędnych, takich jak dokument.
  • To staje się kontekstem grupowania. Oznacza to, że elementy takie jak z-index będą miały wpływ na element, a elementy podrzędne będą ułożone zgodnie z nowym kontekstem.
  • Jest to nowy kontekst formatowania. Oznacza to, że jeśli masz na przykład element na poziomie bloku z ograniczeniem renderowania, będzie on traktowany jako nowe, niezależne środowisko układu. Oznacza to, że układ poza elementem nie ma zazwyczaj wpływu na elementy podrzędne elementu zawierającego go.

Rozmiar (zawiera: rozmiar)

contain: size oznacza, że elementy podrzędne elementu nie mają wpływu na rozmiar elementu nadrzędnego, a zastosowane zostaną wymiary wywnioskowane lub zadeklarowane. Jeśli więc ustawisz contain: size, ale nie określisz jego wymiarów (bezpośrednio ani za pomocą właściwości elastycznych), będzie on renderowany z rozmiarem 0 x 0 pikseli.

Zastosowanie rozmiaru paska i nawiasów eliminuje używanie elementów potomnych przy określaniu rozmiarów, ale samo w sobie nie przynosi zbyt wielu korzyści w zakresie wydajności.

Styl (zawiera: styl)

Trudno jest przewidzieć, jaki wpływ na drzewo DOM przyniesie zmiana stylów elementu. Przykładem może być liczniki CSS, gdzie zmiana licznika w elemencie podrzędnym może mieć wpływ na wartości licznika o tej samej nazwie co w innym miejscu dokumentu. Gdy zasada contain: style jest ustawiona, zmiany stylu nie są rozpowszechniane z powrotem poza element zawierający ten element.

Aby podkreślić, że contain: style nie zapewnia, to styl ograniczony, jak w Shadow DOM. polega tu wyłącznie na ograniczeniu tych części drzewa, które są uwzględniane podczas mutacji stylów, a nie podczas ich zadeklarowania.

Ścisłe i ograniczenie treści

Możesz też połączyć słowa kluczowe (np. contain: layout paint), aby zastosować tylko te zachowania do elementu. Zawierają jednak 2 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 ograniczania jest przydatne, gdy znasz rozmiar elementu z wyprzedzeniem (lub chcesz zarezerwować jego wymiary), ale pamiętaj, że jeśli zadeklarujesz ścisłe ograniczenia bez wymiarów, z powodu domniemanego ograniczenia rozmiaru element może zostać wyświetlony jako pole o wymiarach 0 x 0 pikseli.

Z kolei funkcja ograniczania treści znacznie poprawia zakres, ale nie wymaga wcześniejszego poznawania ani określania wymiarów elementu.

To contain: content, które powinno być używane domyślnie. Ścisłe ograniczanie dostępu należy traktować jako dodatkowe wyjście, jeśli contain: content nie jest wystarczająco mocny, aby zaspokoić Twoje potrzeby.

Daj nam znać, jak Ci idzie

Izolacja to świetny sposób na wskazanie przeglądarkom, co ma być izolowane w ramach strony. Wypróbuj Chrome w wersji 52 lub nowszej i daj nam znać, jak Ci poszło.