Wydajność renderowania

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

Paul Lewis

Użytkownicy internetu oczekują, że strony, które odwiedzają, będą interaktywne i płynnie działać. To właśnie na tym powinniśmy się skupiać. Strony nie tylko powinny szybko się wczytywać, ale też szybko reagować na dane wejściowe użytkownika przez cały cykl życia. Właśnie ten aspekt wrażenia użytkownika mierzy interfejs interakcji do kolejnego wyrenderowania (INP). Dobry wynik INP oznacza, że strona była konsekwentnie i rzetelnie dostosowana do potrzeb użytkownika.

Chociaż ważnym czynnikiem wpływającym na szybkość wczytywania strony jest ilość kodu JavaScriptu wykonywanego w odpowiedzi na interakcje użytkownika, użytkownicy oczekują przede wszystkim wizualnych zmian w interfejsie. Zmiany wizualne w interfejsie użytkownika są wynikiem kilku rodzajów działań, które często określa się mianem renderowania. Proces ten musi przebiegać możliwie szybko, 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 HTML, JavaScript i CSS, oraz zadbać o to, aby kod, który piszesz, a także każdy inny kod zewnętrzny, działał jak najsprawniej.

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

Częstotliwość odświeżania wyświetlacza jest ważną kwestią przy tworzeniu stron internetowych, które są responsywne na działania użytkownika.

Większość urządzeń obecnie odświeża ekran 60 razy na sekundę. Każde odświeżenie powoduje wyświetlenie obrazu, który widzisz. Jest ono powszechnie nazywane klatką. W tym filmie omawiamy pojęcie klatek:

Kadry widoczne w panelu wydajności w Narzędziach deweloperskich w Chrome. Gdy kursor przesuwa się po pasku filmowym u góry ekranu, w podpowiedzi wyświetla się powiększony obraz każdej klatki, a menu nawigacyjne na urządzeniu mobilnym przechodzi w stan „otwarte”.

Chociaż ekran urządzenia odświeża się zawsze z konstantną częstotliwością, aplikacje działające na urządzeniu nie zawsze mogą generować wystarczającą liczbę klatek, aby dopasować ją do tej częstotliwości odświeżania. Jeśli na przykład trwa animacja lub przejście, przeglądarka musi dostosować częstotliwość odświeżania urządzenia, aby generować po jednym klatce na każde odświeżenie ekranu.

Ponieważ typowy wyświetlacz odświeża się 60 razy na sekundę, po szybkich obliczeniach okaże się, że przeglądarka ma 16,66 ms na wygenerowanie każdej klatki. W rzeczywistości przeglądarka ma własne obciążenie dla każdej klatki, więc wszystkie zadania muszą zostać wykonane w ciągu 10 milisekund. Jeśli nie uda Ci się osiągnąć tego limitu, częstotliwość klatek spadnie, a zawartość strony będzie się trząść. To zjawisko jest często nazywane jank.

Jednak wartości docelowe zmieniają się w zależności od typu wykonywanej pracy. Osiągnięcie progu 10 ms jest kluczowe w przypadku animacji, w których obiekty na ekranie są interpolowane w ciągu serii klatek między 2 punktami. W przypadku dyskretnych zmian w interfejsie (czyli przechodzenia z jednego stanu w drugi bez żadnego ruchu po drodze) zalecamy, aby takie zmiany następowały w takim czasie, aby użytkownik odczuwał je jako natychmiastowe. W takich przypadkach często podaje się wartość 100 ms, ale „dobry” próg wartości wskaźnika INP wynosi 200 ms 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 generowanie wielu klatek, których animacje wymagają, aby uniknąć zacięć, czy tylko o szybkie wprowadzanie wizualnych zmian w interfejsie – zrozumienie działania ścieżki pikseli przeglądarki jest kluczowe dla Twojej pracy.

Proces przetwarzania piksela

Jest 5 głównych obszarów, które musisz znać i brać pod uwagę w swojej pracy jako web developer. Te 5 obszarów to te, nad którymi masz największą kontrolę. Każdy z nich reprezentuje kluczowy punkt w procesie od piksela do ekranu:

Ilustracja pełnego procesu przetwarzania Pixela.

• JavaScript: kod JavaScript jest zwykle używany do obsługi zadań, które spowodują zmiany wizualne w interfejsie. Może to być na przykład funkcja jQuery animate, sortowanie zbioru danych lub dodawanie elementów DOM do strony. JavaScript nie jest jednak niezbędny do wywoływania zmian wizualnych: animacje CSS, przejścia CSS i interfejs Web Animations API umożliwiają animowanie zawartości strony.
• Obliczanie stylów: to proces określania, które reguły CSS mają zastosowanie do których elementów HTML na podstawie pasujących selektorów. Na przykład: .headline to przykład selektora CSS, który ma zastosowanie do dowolnego elementu HTML z wartością atrybutu class zawierającą klasę headline. Następnie, gdy reguły zostaną zdefiniowane, są one stosowane, a ostateczne style poszczególnych elementów są obliczane.
• Układ: gdy przeglądarka pozna reguły stosowane do elementu, może zacząć obliczać geometrię strony, np. ile miejsca zajmują elementy i gdzie się pojawiają na ekranie. Model układu strony internetowej oznacza, że jeden element może wpływać na inne. Na przykład szerokość elementu <body> wpływa zwykle na wymiary jego elementów podrzędnych w całym drzewie, więc proces może być dość skomplikowany dla przeglądarki.
• Paint: wypełnianie to proces wypełniania pikseli. Polega ono na narysowaniu tekstu, kolorów, obrazów, obramowań, cieni i w zasadzie wszystkich wizualnych aspektów elementów po obliczeniu ich układu na stronie. Rysowanie odbywa się zwykle na wielu powierzchniach, często zwanych warstwami.
• Kompozycja: ponieważ części strony zostały narysowane na wielu warstwach, muszą zostać zastosowane 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 inne, ponieważ błąd może spowodować nieprawidłowe wyświetlanie jednego elementu na drugim.

Każda z tych części łańcucha przetwarzania pikseli daje możliwość wprowadzenia klatki w animacji lub opóźnienia wyświetlania klatek nawet w przypadku pojedynczych wizualnych zmian w interfejsie. Dlatego ważne jest, aby wiedzieć, które części potoku uruchamia Twój kod, i sprawdzić, czy możesz ograniczyć zmiany tylko do tych części potoku pikseli, które są niezbędne do ich renderowania.

Możesz słyszeć termin „rasteryzacja” w związku z „malowaniem”. Dzieje się tak, ponieważ malowanie to w rzeczywistości 2 zadania:

1. Tworzenie listy wywołań funkcji draw().
2. Wypełnianie pikseli.

Ten drugi proces nazywa się „rasteryzacją”, więc gdy widzisz w DevTools rekordy malowania, możesz założyć, że obejmują one rasteryzację. W niektórych architekturach tworzenie listy wywołań funkcji rysowania i rasteryzacji odbywa się w różnych wątkach, ale nie masz nad tym kontroli jako programista.

Nie zawsze musisz dotykać każdej części potoku danych w każdej klatce. W przypadku danego kadru, gdy wprowadzisz zmianę wizualną za pomocą JavaScriptu, CSS lub interfejsu Web Animations API, zwykle ścieżka przetwarzania działa na 3 sposoby.

1. JS / CSS > Styl > Układ > Malowanie > Kompozyt

Jeśli zmienisz właściwość „layout”, np. taką, która zmienia geometrię elementu, np. szerokość, wysokość lub położenie (np. właściwości CSS left lub top), przeglądarka musi sprawdzić wszystkie inne elementy i „przeformatować” stronę. Wszystkie dotknięte obszary trzeba będzie ponownie pomalować, a ostatecznie pomalowane elementy trzeba będzie ponownie złożyć.

2. JS / CSS > Styl > Farby > Kompozycja

Jeśli zmienisz w CSS właściwości „tylko do malowania” elementu (np. background-image, color lub box-shadow), nie musisz wprowadzać zmian wizualnych na stronie. Pominięcie kroku dotyczącego układu (w miarę możliwości) pozwala uniknąć potencjalnie kosztownej pracy związanej z układem, która mogłaby znacznie wydłużyć czas generowania kolejnego klatki.

3. JS / CSS > Styl > Kompozycja

Jeśli zmienisz właściwość, która wymaga ani układu, ani malowania, przeglądarka może przejść bezpośrednio do etapu tworzenia kompozycji. Jest to najtańsza i najbardziej pożądana ścieżka w systemie Pixel Pipeline w przypadku punktów o wysokiej intensywności w cyklu życia strony, np. animacji czy przewijania. Ciekawostka: Chromium optymalizuje przewijanie strony tak, aby odbywało się tylko na wątku kompozytora, o ile to możliwe. 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 narysowane na ekranie.

Uwaga: jeśli chcesz szybko uzyskać animacje o wysokiej wydajności, przeczytaj artykuł Trzymaj się komponentów i zarządzaj liczbą warstw.

Skuteczność stron internetowych to sztuka unikania pracy, a zarazem zwiększania wydajności wszelkich niezbędnych działań. W wielu przypadkach chodzi o współpracę z przeglądarką, a nie o działanie na jej szkodę. Warto pamiętać, że zadania wyświetlane wcześniej w pipeline różnią się pod względem kosztu obliczeniowego. Niektóre z nich są z założenia droższe od innych.

Przyjrzyjmy się teraz różnym częściom łańcucha dostaw. Zajmiemy się typowymi problemami i sposobami ich diagnozowania i rozwiązywania.

Optymalizacja renderowania w przeglądarce

Wydajność ma znaczenie dla użytkowników. Aby zapewnić im dobre wrażenia, programiści powinni 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 pozbyć się zacięć i tworzyć aplikacje internetowe, które zachowują wydajność 60 klatek na sekundę. Po ukończeniu tego kursu będziesz mieć narzędzia potrzebne do profilowania aplikacji i identyfikowania przyczyn nieoptymalnej wydajności renderowania. Poznasz też proces renderowania przeglądarki i odkryjesz wzorce, które ułatwiają tworzenie szybkich stron internetowych, które użytkownicy chętnie będą wykorzystywać.

To bezpłatny kurs dostępny w Udacity, który możesz zakończyć w dowolnym momencie.