Wydajność renderowania

Użytkownicy zauważają, gdy witryny i aplikacje nie działają prawidłowo, dlatego optymalizacja wydajności renderowania jest kluczowa.

Paul Lewis

Użytkownicy współczesnego internetu oczekują, że odwiedzane przez nich strony będą interaktywne i będą działać płynnie. To właśnie na tym musisz coraz bardziej skupiać swój czas i wysiłek. Strony powinny nie tylko szybko się ładować, ale też szybko reagować na dane wejściowe użytkownika przez cały cykl życia. Ten aspekt wrażeń użytkownika jest mierzony przez dane Interakcja do kolejnego wyrenderowania (INP). Dobry wynik INP oznacza, że strona konsekwentnie i niezawodnie reagowała na potrzeby użytkownika.

Chociaż głównym czynnikiem wpływającym na to, czy strona działa szybko, jest ilość kodu JavaScriptu wykonywanego w odpowiedzi na interakcje użytkownika, użytkownicy oczekują zmian wizualnych w interfejsie. Zmiany wizualne w interfejsie użytkownika są wynikiem kilku rodzajów działań, często określanych zbiorczo jako renderowanie. Te działania muszą być wykonywane jak najszybciej, aby użytkownik miał wrażenie, że aplikacja działa szybko i niezawodnie.

Aby tworzyć strony, które szybko reagują na interakcje użytkowników, musisz zrozumieć, jak przeglądarka obsługuje kod HTML, JavaScript i CSS, oraz zadbać o to, aby napisany przez Ciebie kod – i każdy inny kod zewnętrzny, który dołączysz – działał jak najwydajniej.

Uwaga dotycząca częstotliwości odświeżania urządzenia

Częstotliwość odświeżania wyświetlacza jest ważnym czynnikiem, który należy wziąć pod uwagę podczas tworzenia witryn, które mają szybko reagować na działania użytkownika.

Większość urządzeń odświeża obecnie ekran 60 razy na sekundę. Każde odświeżenie generuje widoczny obraz, który jest powszechnie nazywany klatką. W tym filmie pokazujemy, jak działają ramki:

Klatki wyświetlane w panelu wydajności w Narzędziach deweloperskich w Chrome. Gdy kursor przesuwa się po pasku zdjęć u góry, w etykietce wyświetla się powiększony obraz każdej klatki, a menu nawigacyjne na urządzeniu mobilnym animuje się do stanu „otwarte”.

Ekran urządzenia zawsze odświeża się ze stałą częstotliwością, ale aplikacje działające na urządzeniu nie zawsze są w stanie wygenerować wystarczającą liczbę klatek, aby dopasować się do tej częstotliwości odświeżania. Jeśli na przykład jest uruchomiona animacja lub przejście, przeglądarka musi dopasować częstotliwość odświeżania urządzenia, aby wygenerować jedną klatkę przy każdym odświeżeniu ekranu.

Biorąc pod uwagę, że typowy wyświetlacz odświeża się 60 razy na sekundę, szybkie obliczenia pokazują, że przeglądarka ma 16,66 milisekundy na wygenerowanie każdej klatki. W rzeczywistości jednak przeglądarka ma własne obciążenie dla każdej klatki, więc cała praca musi zostać wykonana w ciągu 10 milisekund. Jeśli nie uda się zmieścić w tym budżecie, liczba klatek spada, a zawartość strony drży na ekranie. To zjawisko jest często nazywane zacinaniem się.

Cele zmieniają się jednak w zależności od rodzaju pracy, którą chcesz wykonać. Osiągnięcie progu 10 milisekund jest kluczowe w przypadku animacji, w których obiekty na ekranie są interpolowane w serii klatek między 2 punktami. Jeśli chodzi o dyskretne zmiany w interfejsie, czyli przechodzenie z jednego stanu do drugiego bez żadnego ruchu pomiędzy nimi, zalecamy, aby takie zmiany były wprowadzane w czasie, który użytkownik odczuwa jako natychmiastowy. W takich przypadkach często podaje się wartość 100 milisekund, ale próg „dobry” dla wskaźnika INP wynosi 200 milisekund lub mniej, aby uwzględnić szerszą gamę urządzeń o różnych możliwościach.

Niezależnie od tego, jakie są Twoje cele – czy chodzi o wygenerowanie wielu klatek, których wymagają animacje, aby uniknąć zacinania się, czy tylko o jak najszybsze wprowadzenie dyskretnej zmiany wizualnej w interfejsie użytkownika – zrozumienie, jak działa potok pikseli przeglądarki, jest niezbędne w Twojej pracy.

Potok pikseli

W pracy programisty stron internetowych musisz znać i uwzględniać 5 głównych obszarów. Te 5 obszarów to te, nad którymi masz największą kontrolę, a każdy z nich reprezentuje kluczowy punkt w procesie przetwarzania pikseli na ekranie:

Ilustracja przedstawiająca pełny potok pikseli.

• JavaScript: JavaScript jest zwykle używany do obsługi zadań, które powodują zmiany wizualne w interfejsie. Może to być na przykład funkcja animate jQuery, sortowanie zbioru danych lub dodawanie elementów DOM do strony. JavaScript nie jest jednak bezwzględnie konieczny do wprowadzania zmian wizualnych: animacje CSS, przejścia CSS i interfejs Web Animations API mogą animować zawartość strony.
• Obliczenia stylów: to proces określania, które reguły CSS mają zastosowanie do poszczególnych elementów HTML na podstawie pasujących selektorów. Na przykład .headline to przykładowy selektor arkusza CSS, który ma zastosowanie do dowolnego elementu HTML z atrybutem class o wartości atrybutu zawierającej klasę headline. Następnie, gdy reguły są już znane, są stosowane i obliczane są ostateczne style dla każdego elementu.
• Układ: gdy przeglądarka wie, które reguły mają zastosowanie do elementu, może zacząć obliczać geometrię strony, np. ile miejsca zajmują elementy i gdzie pojawiają się na ekranie. Model układu stron internetowych oznacza, że jeden element może wpływać na inne. Na przykład szerokość elementu <body> zwykle wpływa na wymiary jego elementów podrzędnych w całym drzewie, więc proces ten może być dość skomplikowany dla przeglądarki.
• Malowanie: malowanie to proces wypełniania pikseli. Obejmuje to rysowanie tekstu, kolorów, obrazów, obramowań, cieni i zasadniczo każdego wizualnego aspektu elementów po obliczeniu ich układu na stronie. Rysowanie odbywa się zwykle na wielu powierzchniach, często nazywanych warstwami.
• Kompozycja: ponieważ części strony mogły zostać narysowane na wielu warstwach, należy je zastosować na ekranie we właściwej kolejności, aby strona renderowała się zgodnie z oczekiwaniami. Jest to szczególnie ważne w przypadku elementów, które nakładają się na siebie, ponieważ błąd może spowodować, że jeden element będzie nieprawidłowo wyświetlany nad drugim.

Każda z tych części potoku pikseli może powodować zacinanie się animacji lub opóźniać renderowanie klatek, nawet w przypadku niewielkich zmian wizualnych w interfejsie. Dlatego ważne jest, aby dokładnie wiedzieć, które części potoku są aktywowane przez kod, i sprawdzić, czy można ograniczyć zmiany tylko do tych części potoku pikseli, które są niezbędne do ich renderowania.

Być może znasz termin „rasteryzacja” używany w połączeniu z „malowaniem”. Dzieje się tak, ponieważ malowanie to tak naprawdę 2 zadania:

1. tworzenie listy wywołań rysowania,
2. Wypełniam piksele.

Ten drugi proces nazywa się „rasteryzacją”, więc gdy widzisz w Narzędziach deweloperskich rekordy renderowania, pamiętaj, że obejmują one rasteryzację. W niektórych architekturach tworzenie listy wywołań rysowania i rasteryzacja są wykonywane w różnych wątkach, ale jako deweloper nie masz nad tym kontroli.

Nie zawsze musisz dotykać każdej części potoku w każdej klatce. W rzeczywistości istnieją 3 sposoby, w jakie potok zwykle działa w przypadku danej klatki, gdy wprowadzasz zmiany wizualne za pomocą JavaScriptu, CSS lub interfejsu Web Animations API.

1. JS/CSS > Styl > Układ > Renderowanie > Kompozycja

Jeśli zmienisz właściwość „układu”, np. taką, która zmienia geometrię elementu, np. szerokość, wysokość lub jego pozycję (np. właściwości CSS left lub top), przeglądarka musi sprawdzić wszystkie inne elementy i „ponownie ułożyć” stronę. Wszystkie obszary, których to dotyczy, trzeba będzie ponownie pomalować, a ostateczne pomalowane elementy trzeba będzie ponownie połączyć.

2. JS/CSS > Styl > Malowanie > Kompozycja

Jeśli zmienisz właściwość elementu w CSS, która wpływa tylko na renderowanie, np. background-image, color lub box-shadow, etap układu nie jest konieczny do wprowadzenia wizualnej aktualizacji strony. Pomijając krok układu (tam, gdzie to możliwe), unikasz potencjalnie kosztownej pracy nad układem, która mogłaby znacząco opóźnić wygenerowanie następnej klatki.

3. JS/CSS > Styl > Kompozyt

Jeśli zmienisz właściwość, która nie wymaga ani układu, ani renderowania, przeglądarka może przejść od razu do etapu kompozycji. Jest to najtańsza i najbardziej pożądana ścieżka w potoku pikseli w przypadku punktów wysokiego obciążenia w cyklu życia strony, takich jak animacje czy przewijanie. Ciekawostka: Chromium optymalizuje przewijanie strony, tak aby w miarę możliwości odbywało się ono wyłącznie w wątku kompozytora. Oznacza to, że nawet jeśli strona nie odpowiada, nadal możesz ją przewijać i widzieć jej części, które zostały wcześniej wyświetlone na ekranie.

Uwaga: jeśli chcesz szybko uzyskać wysoką wydajność animacji, przeczytaj artykuł Stick to compositor-only properties and manage layer count (Używaj tylko właściwości kompozytora i zarządzaj liczbą warstw).

Wydajność sieci to sztuka unikania pracy przy jednoczesnym maksymalnym zwiększaniu wydajności niezbędnych zadań. W wielu przypadkach chodzi o to, aby współpracować z przeglądarką, a nie działać przeciwko niej. Warto pamiętać, że zadania, które wcześniej pokazaliśmy w potoku, różnią się pod względem kosztów obliczeniowych. Niektóre zadania są z natury bardziej kosztowne niż inne.

Przyjrzyjmy się poszczególnym częściom potoku. Omówimy typowe problemy oraz sposoby ich diagnozowania i rozwiązywania.

Optymalizacje renderowania w przeglądarce

Wydajność ma znaczenie dla użytkowników. Aby zapewnić im dobre wrażenia, programiści stron internetowych muszą tworzyć witryny, które szybko reagują na interakcje użytkowników i płynnie się renderują. Ekspert ds. wydajności Paul Lewis pomoże Ci wyeliminować zacinanie się i tworzyć aplikacje internetowe, które utrzymują wydajność na poziomie 60 klatek na sekundę. Po ukończeniu tego kursu będziesz dysponować narzędziami potrzebnymi do profilowania aplikacji i identyfikowania przyczyn nieoptymalnej wydajności renderowania. Poznasz też potok renderowania przeglądarki i odkryjesz wzorce, które ułatwiają tworzenie szybkich witryn, z których użytkownicy będą chętnie korzystać.

Jest to bezpłatny kurs oferowany przez Udacity, który możesz rozpocząć w dowolnym momencie.