Wydajność renderowania

Użytkownicy zauważają, że strony i aplikacje działają źle, dlatego kluczowe jest zoptymalizowanie wydajności renderowania.

Użytkownicy współczesnych użytkowników internetu oczekują, że odwiedzane przez nich strony będą interaktywne, i na tym musisz się skupić. Strony nie powinny się tylko szybko ładować, lecz także szybko reagować na dane wejściowe użytkownika w całym cyklu ich życia. Ten aspekt wrażeń użytkownika jest dokładnie to, co mierzy dane Interakcja z następnym wyrenderowaniem (INP). Dobra INP oznacza, że strona działała konsekwentnie i niezawodnie w odpowiedzi na do Twoich potrzeb.

Mimo że głównym czynnikiem wpływającym na atrakcyjność strony jest JavaScript, który wykonujesz w odpowiedzi na interakcje użytkowników, to zmiany wizualne w interfejsie. Wizualne zmiany dotyczące użytkownika są wynikiem różnych działań, często nazywanych łącznie z renderowaniem. Ta praca musi nastąpić jak najszybciej, zapewnia użytkownikom szybką i niezawodną obsługę.

Aby pisać strony, które szybko reagują na interakcje użytkowników, obsługi HTML, JavaScriptu i CSS przez przeglądarkę napisanego przez Ciebie kodu, jak i całego uwzględnionego przez Ciebie kodu zewnętrznego, jak najbardziej efektywne.

Uwaga o 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 i generuje widoczny obraz. Jest to powszechnie nazywane ramką. W poniżej przedstawiono koncepcję klatek:

Ekran urządzenia zawsze odświeża się ze stałą częstotliwością, ale aplikacje, które na danym urządzeniu nie zawsze są w stanie wygenerować wystarczającą liczbę klatek, z daną częstotliwością odświeżania. Na przykład, jeśli jest animacja lub przejście jest uruchomiony, więc przeglądarka musi pasować do częstotliwości odświeżania urządzenia, klatka przy każdym odświeżeniu ekranu.

Biorąc pod uwagę, że typowy wyświetlacz jest odświeżany 60 razy na sekundę, można by to zrobić pokazuje, że przeglądarka ma 16,66 milisekund na utworzenie każdej klatki. W rzeczywistości przeglądarka ma jednak własny narzut na każdą klatkę, więc musisz zrobić to w ciągu 10 milisekund. Jeśli nie uda Ci się aby dostosować się do tego budżetu, zmniejszyć liczbę klatek i zaburzać zawartość strony na ekranie. Ten jest często nazywany zacinaniem.

Jednak cele mogą się zmieniać w zależności od rodzaju wykonywanej pracy. Osiągnięcie progu 10 milisekund jest kluczowe dla animacji, w których obiektów na ekranie jest interpolowanych na serii klatek pomiędzy dwoma pkt. Jeśli chodzi o dyskretne zmiany w interfejsie, czyli przejście z jednego stanu do drugiego bez żadnego ruchu pomiędzy – zalecamy wprowadzenie takich zmian w czasie, który od razu wydaje się użytkownika. W takich przypadkach 100 milisekund to często cytowana wartość, ale „dobra” wartość wskaźnika INP. wynosi 200 milisekund lub mniej, aby obsługi szerszej gamy urządzeń o różnych możliwościach.

Niezależnie od tego, jaki masz cel — czy chcesz stworzyć wiele klatek, które animacje które pozwalają uniknąć zacinania lub wywoływania jedynie wyraźnej zmiany wizualnej aby interfejs użytkownika działał jak najszybciej, rozumiejąc, jak piksel przeglądarki jest kluczowe w pracy.

Potok pikseli

Oto 5 głównych obszarów, o których warto wiedzieć i o czym trzeba pamiętać jako programista stron internetowych. W tych 5 obszarach masz największą nad nimi i każdy z nich stanowi kluczowy punkt w potoku pikseli na ekran:

• JavaScript:JavaScript jest zwykle używany do wykonywania prac, które powodują wizualne zmiany w interfejsie. Może to być na przykład jQuery animate, sortowanie zbioru danych lub dodawanie elementów DOM do strony. Obsługa języka JavaScript nie jest jednak ściśle wymagana do wywoływania zmian wizualnych: CSS animacje, przejścia CSS i interfejs Web Animations API pozwalają na animowanie zawartości strony.
• Obliczenia stylu: to proces ustalania, które reguły CSS które wskazują elementy HTML na podstawie pasujących selektorów. Przykład: .headline to przykład selektora arkusza CSS, który odnosi się do każdego elementu HTML. z wartością atrybutu class zawierającą klasę headline. Od wtedy, gdy znane są już reguły, stosowane są ich ostateczne style dla każdego .
• Układ: gdy przeglądarka wie, które reguły mają zastosowanie do elementu, może zacznij obliczać geometrię strony, np. ilość elementów w jakimś miejscu, oraz w miejscu ich wyświetlania na ekranie. Model układu sieci oznacza, że jeden element może wpływać na inne. Na przykład szerokość <body> wpływa zwykle na wymiary jego elementów podrzędnych i przerysowując drzewo, proces ten może być dość skomplikowany dla przeglądarki.
• Malowanie: malowanie to proces wypełniania pikseli. Polega na rysowaniu tekstu, kolorów, obrazów, obramowania, cieni i zasadniczo każdego elementu wizualnego poszczególnych elementów po obliczeniu ich układu na stronie. Rysunek jest zazwyczaj rysowany na wielu powierzchniach, nazywanych często warstwami.
• Kompozytowa: ponieważ części strony mogły być przyciągane wielowarstwowych, należy je nakładać na ekran w odpowiedniej kolejności. że strona będzie się wyświetlać zgodnie z oczekiwaniami. Jest to ważne zwłaszcza w przypadku elementów, które się nakładają, bo błąd może spowodować wyświetlenie jednego elementu. nad inną.

Każdy z tych elementów potoku pikseli pozwala przedstawić zacinają się animacje lub opóźniają malowanie klatek, nawet w celu uzyskania zmiany w interfejsie. Dlatego tak ważne jest, aby dokładnie zrozumieć, które części potoku uruchamia się Twój kod, i sprawdzić, czy możesz ogranicz zmiany tylko do tych części potoku piksela, które są niezbędne jak je renderować.

Być może zdarzyło Ci się usłyszeć słowo „rasteryzacja” w połączeniu z słowem „paint”. Ten ponieważ malowanie to tak naprawdę dwa zadania:

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

Ten drugi sposób jest nazywany „rasteryzacją”, więc za każdym razem, gdy widzisz wyrenderowane rekordy w Narzędzia deweloperskie powinny obejmować rasteryzację. W niektórych tworzenia list wywołań rysowania i rasteryzacji w różnych wątkach, ale nie masz na to kontroli jako deweloper.

Nie zawsze trzeba dotykać wszystkich części potoku w każdej ramce. W rzeczywistości są 3 sposoby normalne, w jaki sposób potok w przypadku danego po wprowadzeniu zmiany wizualnej (czy to za pomocą JavaScriptu, CSS) albo Interfejs Animations API.

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

Jeśli zmienisz „układ” właściwością, np. zmieniającą właściwości elementu geometrii, takiej jak szerokość, wysokość lub jej pozycja (np. arkusz CSS left lub top); właściwości), przeglądarka musi sprawdzić wszystkie pozostałe elementy i „przeformatować” stronę. Wszystkie dotknięte obszary należy pomalować ponownie, a na koniec pomalować trzeba będzie je z powrotem skomponować.

2. JS / CSS > Styl > Barwiony > Kompozyt

Jeśli zmienisz tryb „tylko malowanie” dla elementu w CSS, np. właściwości takie jak background-image, color lub box-shadow – krok układu nie jest konieczne do wprowadzenia wizualnej aktualizacji strony. Pominięcie układu pozwala uniknąć kosztownych prac związanych z układem, które mogłyby mieć w inny sposób przyczyniły się do znacznego opóźnienia w utworzeniu następnej klatki.

3. JS / CSS > Styl > Kompozyt

Jeśli zmienisz właściwość, która nie wymaga układu ani malowania, przeglądarka możesz od razu przejść do etapu komponowania. To najtańsza i najdroższa opcja przez potok pikseli dla punktów wysokiego ciśnienia cyklu życia strony, np. animacji czy przewijania. Ciekawostka: Chromium optymalizuje przewijanie strony w taki sposób, aby zachodziło wyłącznie w wątku kompozytora, co oznacza, że nawet jeśli strona nie odpowiada, nadal możesz przewija stronę i zobaczyć jej fragmenty, które były wcześniej narysowane na ekranie.

Wydajność strony to sztuka unikania pracy przy jednoczesnym zwiększaniu wydajności niezbędnych prac. W wielu przypadkach chodzi o pracę za pomocą przeglądarki, a nie przeciwko niej. Warto pamiętać, że praca widoczne wcześniej w 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 procesu. Przyjrzymy się temu o typowych problemach, a także sposobach ich diagnozowania i rozwiązywania.

Optymalizacje renderowania w przeglądarkach

Wydajność jest ważna dla użytkowników, a deweloperzy stron internetowych – aby dbać o wygodę użytkowników tworzyć witryny, które szybko reagują na interakcje użytkowników płynnie. Paul Lewis, ekspert ds. skuteczności, pomoże Ci zniszczyć tworzyć aplikacje internetowe utrzymujące wydajność 60 klatek na sekundę. Opuszczasz oraz narzędzia potrzebne do profilowania aplikacji i identyfikowania przyczyn nieoptymalną wydajność renderowania. Poznasz też sposób renderowania w przeglądarce, i poznać wzorce ułatwiające tworzenie szybkich stron użytkownicy będą mogli korzystać z niej z przyjemnością.

Jest to bezpłatne szkolenie w Udacity. Możesz je wziąć w dowolnym momencie.