0Pricing
CSS Academy · Lekcja

Wydajność: właściwości transformowalne a ponowne renderowanie

Nauczy się Pan/Pani rozpoznawać właściwości przyspieszane przez GPU oraz te, które powodują kosztowne ponowne renderowanie układu.

Wydajność: właściwości transformowalne a ponowne renderowanie to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Potok renderowania

Przeglądarki renderują stronę w trzech etapach: Layout (rozmiar i położenie) → Paint (piksele) → Composite (łączenie warstw GPU). Animowanie właściwości, które uruchamiają wcześniejsze etapy, jest kosztowne.

Właściwości wywołujące layout

Zmiana tych właściwości zmusza przeglądarkę do ponownego obliczenia layoutu, potencjalnie dla całej strony. Należy unikać ich animowania:

  • width, height
  • margin, padding
  • top, left
  • font-size
  • display

Właściwości wywołujące paint

Pomijają one layout, ale ponownie malują piksele. Są umiarkowanie kosztowne:

  • background-color
  • color
  • box-shadow
  • border

Właściwości tylko dla composite

Pomijają zarówno layout, jak i paint — przeglądarka musi jedynie złożyć wcześniej zrasteryzowane warstwy. Są bardzo tanie obliczeniowo i przyspieszane przez GPU:

  • transform
  • opacity

Złota zasada animacji CSS

Aby uzyskać płynne animacje 60 kl./s, należy animować wyłącznie transform i opacity. Należy używać transform: translate() zamiast top/left oraz opacity zamiast wygaszania za pomocą display.

  <div class="box demo-active">Box</div>

Właściwość will-change

will-change informuje przeglądarkę, że ma przenieść element do własnej warstwy GPU przed rozpoczęciem animacji, zapobiegając "mignięciu podczas promocji" w trakcie animacji.

  <div class="animated">Animated</div>

will-change: auto

Po zakończeniu animacji należy ustawić will-change: auto albo całkowicie usunąć tę właściwość. Zbyt wiele elementów utrzymywanych w osobnych warstwach powoduje niepotrzebne zużycie pamięci GPU.

Pomiar za pomocą DevTools

Za pomocą karty Performance w Chrome DevTools można nagrywać i analizować czasy renderowania klatek. Karta Rendering umożliwia włączenie migotania malowania (zielonej nakładki), która pokazuje, które elementy są przemalowywane w każdej klatce.

transform zamiast top/left

Najbardziej znacząca optymalizacja polega na zastąpieniu animacji położenia właściwością transform:

  <div class="fly demo-active">Fly</div>

Koszt przejścia koloru

Przejścia koloru tła wywołują ponowne malowanie, ale nie zmieniają layoutu. Są akceptowalne w przypadku małych elementów. Dla dużych teł warto zamiast tego użyć pseudoelementu z przejściem właściwości opacity:

  <button class="btn demo-active">Hover me</button>

Właściwość contain

Właściwość contain informuje przeglądarkę, że element i jego poddrzewo są niezależne. Ogranicza to zakres unieważniania layoutu i poprawia wydajność ponownego malowania.

  <div class="widget">Widget</div>

Szybkie sprawdzenie

Które dwie właściwości CSS można animować na etapie composite bez wywoływania layoutu ani paint?

Podsumowanie

Animowanie właściwości layoutu (width, top, margin) wywołuje kosztowne ponowne obliczenia. Właściwości paint (color, background) są tańsze. Tylko transform i opacity są animowane na etapie composite GPU bez wywoływania layoutu ani paint. Aby uzyskać płynne i wydajne animacje, zawsze należy preferować te właściwości.

Często zadawane pytania

Czy lekcja „Wydajność: właściwości transformowalne a ponowne renderowanie” jest bezpłatna?

Tak — pełny tekst „Wydajność: właściwości transformowalne a ponowne renderowanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wydajność: właściwości transformowalne a ponowne renderowanie”?

Nauczy się Pan/Pani rozpoznawać właściwości przyspieszane przez GPU oraz te, które powodują kosztowne ponowne renderowanie układu. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Wydajność: właściwości transformowalne a ponowne renderowanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Czas trwania i harmonogram właściwości transition
  2. Funkcje easing: ease, linear, cubic-bezier
  3. Przejścia wielu właściwości
  4. Wydajność: właściwości transformowalne a ponowne renderowanie
← Powrót do CSS Academy