Układ, malowanie i kompozycja: potok renderowania

Po zbudowaniu drzewa renderowania przeglądarka wykonuje trzy etapy: Layout (obliczanie rozmiarów i pozycji elementów), Paint (wypełnianie pikseli kolorami, tekstem i obrazami) oraz Composite (łączenie namalowanych warstw i wyświetlanie ich na ekranie).

Layout oblicza geometrię — szerokość, wysokość oraz pozycję x/y — każdego elementu. Zmiana właściwości wpływających na geometrię (width, margin, padding, font-size, position) uruchamia layout dla elementu i potencjalnie całego jego poddrzewa — jest to najbardziej kosztowny etap.

Paint wypełnia piksele każdej warstwy: tła, obramowania, tekst i cienie. Zmiana color, background-color, visibility lub border-radius wywołuje ponowne malowanie bez ponownego obliczania układu — jest to tańsze niż layout, ale nadal kosztowne, jeśli ponownie malowany jest duży obszar.

Compositor łączy warstwy za pomocą GPU. Właściwości CSS wpływające wyłącznie na compositing — transform i opacity — można animować bez uruchamiania layoutu ani paint. GPU obsługuje je z częstotliwością 60 kl./s przy minimalnym udziale CPU.

csstriggers.com (obecnie dokumentacja dostępna po stronie przeglądarki) opisuje, które właściwości CSS wywołują layout, paint lub composite w poszczególnych silnikach przeglądarek. Użyj tego źródła do sprawdzania właściwości animacji. W przypadku właściwości animowanych preferuj transform i opacity.

Layout thrashing występuje, gdy JavaScript naprzemiennie odczytuje właściwości układu (offsetWidth) i zapisuje właściwości stylu w pętli. Każdy zapis unieważnia układ, a każdy odczyt wymusza synchroniczny reflow. Grupuj wszystkie odczyty przed wszystkimi zapisami, aby uniknąć layout thrashing.

Tylko transform i opacity są w całości obsługiwane przez compositor, gdy element znajduje się na własnej warstwie. Animowanie dowolnej innej właściwości — nawet left/top — uruchamia layout lub paint w głównym wątku i może powodować zacinanie animacji.

Przeglądarki przenoszą elementy na własną warstwę GPU, gdy mają will-change: transform, animację CSS właściwości transform/opacity, stałe pozycjonowanie z sąsiednimi elementami używającymi compositingu albo transformację 3D. Każda warstwa zużywa pamięć GPU — zbyt wiele warstw powoduje presję na pamięć.

Burza malowania występuje, gdy duża część strony jest ponownie malowana w każdej klatce. Aby zidentyfikować obszary ponownego malowania, użyj w Chrome DevTools opcji Rendering → Paint flashing. Umieść często animowane elementy na osobnych warstwach, aby ograniczyć obszar ponownego malowania.

Nagraj profil wydajności w Chrome DevTools. Wykres płomieniowy pokazuje zdarzenia Layout, Update Layer Tree, Paint i Composite. Długie paski Layout lub Paint wskazują wąskie gardła. Aby utrzymać 60 kl./s, dąż do czasu renderowania klatki krótszego niż 16 ms.

W miarę możliwości animuj za pomocą transform i opacity. Do animacji ujawniania używaj clip-path zamiast width/height — clip-path dobrze współpracuje z kompozytorem w nowoczesnych przeglądarkach. Unikaj animowania box-shadow; zamiast tego użyj opacity oraz pseudoelementu z wcześniej wyrenderowanym cieniem.

Które dwie właściwości CSS można animować bez wywoływania układu lub malowania?

Potok renderowania — Layout, Paint i Composite — określa wydajność animacji. Layout jest najbardziej kosztowny, Paint ma umiarkowany koszt, a właściwości ograniczone do Composite (transform, opacity) są obsługiwane przez GPU. Zrozumienie mechanizmów wywołujących te etapy pozwala tworzyć płynne animacje 60 kl./s bez nadmiernego przeliczania układu i burz malowania.