Wydajność renderowania

Użytkownicy zauważają, że strony i aplikacje nie działają dobrze, więc optymalizacja wydajności renderowania jest kluczowa.

Użytkownicy internetu oczekują, że odwiedzane przez nich strony będą interaktywne i wygodne, dlatego trzeba poświęcić więcej czasu i wysiłku. Strony nie powinny po prostu szybko się ładować, lecz także szybko reagować na działania użytkowników przez cały cykl życia. W rzeczywistości to właśnie wskaźnik interakcji z kolejnym wyrenderowaniem (INP) odzwierciedla właśnie ten aspekt wrażeń użytkownika. Dobry INP oznacza, że strona była konsekwentnie i niezawodnie reagowała na potrzeby użytkownika.

Choć ważną częścią tego, co sprawia, że strona wydaje się interesująca, jest ilość kodu JavaScript uruchamianego w odpowiedzi na interakcje użytkownika, użytkownicy spodziewają się zmian wizualnych w interfejsie. Wizualne zmiany w interfejsie użytkownika są wynikiem różnych działań, zwanych łącznie renderowaniem. Muszą one nastąpić jak najszybciej, aby wrażenia użytkownika były szybkie i niezawodne.

Aby pisać strony szybko reagujące na interakcje użytkowników, musisz poznać sposób obsługi języka HTML, JavaScript i CSS przez przeglądarkę, i zadbać o to, aby ten kod (oraz każdy dodany przez Ciebie kod innej firmy) działał tak wydajnie, jak to możliwe.

Uwaga na temat częstotliwości odświeżania urządzenia

Obecnie większość urządzeń odświeża ekran 60 razy na sekundę. Każde odświeżenie tworzy wynik wizualny, więc jest on powszechnie nazywany ramką. W tym filmie przedstawiamy koncepcję klatek:

Ekran urządzenia zawsze odświeża się ze stałą częstotliwością, ale aplikacje uruchamiane na nim niekoniecznie muszą być w stanie wygenerować wystarczającą liczbę klatek, która odpowiada tej częstotliwości odświeżania. Jeśli na przykład trwa animacja lub przejście, przeglądarka musi dostosować się do częstotliwości odświeżania urządzenia, aby utworzyć jedną klatkę przy każdym odświeżeniu ekranu.

Biorąc pod uwagę, że typowy wyświetlacz jest odświeżany 60 razy na sekundę, obliczenia matematyczne wskazują, że przeglądarka ma 16,66 milisekundy na utworzenie każdej klatki. W rzeczywistości przeglądarka generuje jednak własny narzut na każdą klatkę, więc całą pracę trzeba wykonać w ciągu 10 milisekund. Jeśli nie wykorzystasz tego budżetu, liczba klatek na sekundę się zmniejszy, a zawartość strony zacznie zmieniać się na ekranie. Zjawisko to jest często nazywane zacinaniem.

Twoje wartości docelowe zmieniają się jednak w zależności od typu pracy, jaką chcesz wykonać. Osiągnięcie progu 10 milisekund jest ważne w przypadku animacji, w których obiekty na ekranie są interpolowane w sekwencji klatek między dwoma punktami. W przypadku dyskretnych zmian w interfejsie, czyli przechodzenia z jednego stanu do drugiego bez żadnych ruchów, zalecamy wprowadzanie takich zmian w czasie, który daje wrażenie natychmiastowemu. W takich przypadkach często podawana jest wartość 100 milisekund, ale wartość progowa wskaźnika INP wynosi maksymalnie 200 milisekund. Ma to na celu zapewnienie zgodności z większą gamą urządzeń o różnych możliwościach.

Niezależnie od tego, co chcesz osiągnąć, może np. chcesz stworzyć wiele klatek, których animacje wymagają, by uniknąć zmęczenia, czy tylko jak najszybciej wprowadzić wyraźne zmiany w interfejsie. Zrozumienie działania potoku pikseli w przeglądarce ma kluczowe znaczenie dla Twojej pracy.

Potok Pixela

Jest 5 głównych obszarów, o których musisz wiedzieć i o których musisz pamiętać w swojej pracy jako programista. Oto 5 obszarów, nad którymi masz największą kontrolę. Każdy z nich stanowi kluczowy punkt procesu przesyłania pikseli na ekran:

• JavaScript:zwykle do obsługi zadań, których rezultatem są zmiany wizualne w interfejsie, JavaScript jest zwykle używany. Może to być na przykład funkcja animate biblioteki jQuery, sortowanie zbioru danych lub dodanie do strony elementów DOM. Obsługa JavaScriptu nie jest wymagana do wywołania zmian wizualnych, ale animacje CSS, przejścia CSS i interfejs Web Animations API mogą animować zawartość strony.
• Obliczenia stylu: sposób 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ład selektora CSS, który odnosi się do dowolnego elementu HTML z wartością atrybutu class, która zawiera klasę headline. Następnie stosuje się reguły i obliczane są ostateczne style dla każdego z nich.
• Układ: gdy przeglądarka wie, które reguły mają zastosowanie do elementu, może zacząć obliczać geometrię strony, np. ilość miejsca zajmowanego przez elementy i miejsce ich pojawienia się na ekranie. Model układu sieci oznacza, że jeden element może wpływać na pozostałe. Na przykład szerokość elementu <body> zazwyczaj wpływa na wymiary elementów podrzędnych w górę i w dół drzewa, więc ten proces może być bardzo duży dla przeglądarki.
• Paint: malowanie to proces wypełniania pikseli. Obejmuje narysowanie tekstu, kolorów, obrazów, obramowania, cieni, a także właściwie każdego aspektu wizualnego elementów po wyliczeniu ich układu na stronie. Rysowanie odbywa się zwykle na wielu powierzchniach, nazywanych często warstwami.
• Kompozytowe: fragmenty strony były potencjalnie narysowane na wielu warstwach, więc trzeba je zastosować na ekranie w odpowiedniej 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ż w wyniku błędu jeden element może wyświetlać się nieprawidłowo nad drugim.

Każdy z tych elementów potoku piksela to okazja do wprowadzenia zacięć w animacjach lub opóźnienia renderowania klatek nawet w przypadku dyskretnych zmian wizualnych w interfejsie. Dlatego musisz wiedzieć, które części potoku aktywuje Twój kod i czy możesz ograniczyć wprowadzanie zmian tylko do tych części potoku piksela, które są niezbędne do ich renderowania.

Być może zdarzyło Ci się znać termin „rasteryzacja” używany w połączeniu z wyrazem „farba”. Dzieje się tak, ponieważ malowanie to tak naprawdę dwa zadania:

1. Tworzenie listy wywołań rysowania.
2. Wypełnianie pikseli.

Ta ostatnia nazwa jest nazywana „rasteryzacją”, więc za każdym razem, gdy widzisz w Narzędziach deweloperskich rekordy wyrenderowania, pomyśl o uwzględnieniu rasteryzacji. W niektórych architekturach tworzenie listy wywołań rysowania i rasteryzacji odbywa się w różnych wątkach, ale nie jest to Twoją kontrolą jako programista.

Nie zawsze musisz dotknąć każdego elementu potoku w każdej klatce. Istnieją 3 sposoby normalnego działania potoku w przypadku danej klatki podczas wprowadzania zmiany wizualnej: za pomocą JavaScriptu, CSS lub interfejsu WebAnimations API.

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

Jeśli zmienisz właściwość „układ”, np. zmieniająca geometrię elementu, taką jak szerokość, wysokość lub jego położenie (np. właściwości CSS left lub top), przeglądarka musi sprawdzić pozostałe elementy i „przeformatować” stronę. Wszystkie dotknięte problemem należy ponownie pomalować, a końcowe namalowane elementy skomponować ponownie.

2. JS / CSS > Styl > Paint > Kompozyt

Jeśli w przypadku elementu w kodzie CSS zmienisz właściwość „tylko malowanie” – np. właściwości takie jak background-image, color lub box-shadow – krok dotyczący układu nie jest konieczne do zatwierdzenia aktualizacji wizualnej strony. Pomijając etap tworzenia układu – tam, gdzie to możliwe, pozwalasz uniknąć potencjalnie kosztownej pracy nad układem, która mogłaby spowodować duże opóźnienia przy tworzeniu kolejnej klatki.

3. JS / CSS > Styl > Kompozytowy

Jeśli zmienisz właściwość, która nie wymaga układu ani renderowania, przeglądarka może przejść bezpośrednio do etapu komponowania. Jest to najtańsza i najbardziej pożądana ścieżka w potoku pikseli, używana w punktach pod wysokim ciśnieniem w cyklu życia strony, takich jak animacje czy przewijanie. Ciekawostka: Chromium optymalizuje przewijanie strony, tak aby odbywało się wyłącznie w wątku kompozytora (tam, gdzie to możliwe). Oznacza to, że nawet jeśli strona nie odpowiada, możesz ją przewinąć i zobaczyć jej fragmenty, które wcześniej były wyświetlane na ekranie.

Wydajność w internecie to sztuka unikania prac przy jednoczesnym zwiększeniu wydajności wszelkich niezbędnych działań. W wielu przypadkach sprowadza się to do pracy z przeglądarką, a nie po to. Warto pamiętać, że zadania przedstawione wcześniej w ramach potoku różnią się pod względem kosztów obliczeniowych. Niektóre zadania są z natury droższe od innych.

Przyjrzyjmy się różnym etapom tego procesu. Przyjrzymy się typowym problemom, a także sposobom ich diagnozowania i rozwiązywania.

Optymalizacje renderowania przeglądarki

Wydajność jest dla użytkowników ważna, a dla wygody użytkowników deweloperzy muszą tworzyć witryny, które szybko reagują na interakcje użytkowników i płynnie się wyświetlają. Specjalista ds. wydajności, Paul Lewis, pomoże Ci wyeliminować zacięty sam i utworzyć aplikacje internetowe z prędkością 60 klatek na sekundę. Po zakończeniu tego kursu będziesz korzystać z narzędzi niezbędnych do profilowania aplikacji i określania przyczyn nieoptymalnej wydajności renderowania. Zapoznasz się też z procesem renderowania przeglądarki i odkryjesz wzorce ułatwiające tworzenie szybkich witryn, które będą przyjemne dla użytkowników.

To bezpłatny kurs dostępny w Udacity. Możesz do niego wziąć udział w dowolnym momencie.