Narzędzia Deweloperskie w Przeglądarce: Wydajność kodu

0:00W tej lekcji przyjdziemy sobie do zakładki performance która nie

0:04ukrywam że jest bardzo zaawansowana i ona się może przydać w bardzo specyficznych

0:08momentach to znaczy jeżeli tworzysz aplikację która musi być bardzo wydajna

0:12która ma dużo animacji to na pewno ta zakładka będzie dla ciebie przydatna

0:16lub jeżeli będziesz chciał sprawdzić jak sobie radzi twoja strona czy aplikacja na

0:20przykład na urządzeniach ze słabszym procesorem takich jak na przykład telefony komórkowe

0:25ale chwilkę chciałbym zrobić wstępu żebyśmy wiedzieli o czym mówimy otóż

0:29pamiętajmy że to jest kod html który przylatuje z serwera

0:33do przeglądarki internetowej nie ma znaczenia czy na urządzeniu mobilnym czy na komputerze przeglądarka

0:38musi sparsować cały ten kod stworzyć drzewo dokumentu pobrać

0:42wszystkie style i co bardzo ważne pobrać i wykonać również skrypty więc

0:46taki skrypt jak sobie pobierze jak tutaj to musi go sparsować następnie

0:51musi go skopiować i wykonać no i oczywiście te wszystkie czynności

0:55polegają na procesorze danego urządzenia więc jeżeli my na codzień

0:59testujemy sobie strony internetowe na bardzo szybkich komputerach to nie do końca

1:03mamy odzwierciedlenie tego jak taka strona będzie szczególnie taka która ma dużo javascriptu

1:07i dużo styli jak ona będzie się zachowywać na urządzeniach mobilnych i o to tutaj chodzi

1:12żebyśmy mogli tak stworzyć nasze aplikację lub tak je zbadać z użyciem panelu

1:17performance abyśmy widzieli gdzie są jakieś potencjalne wąskie

1:21gardła pierwszą rzeczą którą chciałbym żebyśmy zrobili to jest tutaj będąc

1:25w tej zakładce wciśnięcie escape przejście tutaj do rendering

1:29i zaznaczanie paint flashing bo chciałbym ci pokazać jedną rzecz za

1:34każdym razem kiedy przeglądarka musi coś malować od nowa na ekranie oczywiście możesz

1:38sobie wyobrazić że ona musi wszystko wyliczyć od nowa namalować te piksele i tak

1:42dalej jest również obciążające i mam taki przykład tutaj z animacją

1:46w css3 ale najpierw tutaj jest animacja

1:51którą robi jQuery w taki sposób można powiedzieć stary

1:57kiedy jeszcze nie było css3 czyli przypisuje style i zmienia

2:01je po trochę zwróć uwagę tutaj jak ja kliknę na przesuń obraz co się

2:05dzieje tutaj w zasadzie chodzi o to left to jest przesuwane

2:09odświeżę jeszcze raz ci pokażę widzimy że

2:13tutaj po troszkę to 400 jest przesuwane czyli za każdym razem jak to zmieniamy to my mówimy

2:17przeglądarce narysuj od nowa to co widzisz teraz z kolei chciałbym żebyś się skupił

2:21na tym ekranie i wszystko co będzie migać na zielono to są te pola

2:26te miejsca gdzie przeglądarka musi coś wyrenderować od nowa więc odświeżam zrobię

2:30jeszcze raz i zauważ że tutaj cały ten obrazek musiała renderować

2:34od nowa na szczęście tylko ten obrazek czasami będziemy tutaj mieli znacznie większe

2:39elementy które będą zmieniane znacznie większe

2:43obszary chciałem powiedzieć więc tak to wygląda natomiast teraz

2:47mam drugi przykład jeżeli tutaj wpiszemy finish który już wykorzystuje

2:51animację w css3 a więc z użyciem transform i transition

2:55jeżeli tutaj kliknę zauważ że przeglądarka nie musiała tego malować być może zauważyłeś

3:01zróbmy jeszcze raz raz migło na zielono i drugi raz czyli pomiędzy nie musiała tego

3:05malować i ta animacja jest po prostu dużo bardziej wydajna i chciałem ci teraz

3:09pokazać i jak te dwie animacje można zobaczyć w panelu

3:13performance jak to rzeczywiście wygląda więc mamy tutaj taki oto panel

3:17i pierwsze co będę chciał zrobić to zaznaczyć sobie jeszcze CPU throttling

3:21dlatego że mam dosyć szybki komputer i nie będzie dużych różnic pomiędzy tymi

3:26dwoma animacjami ale jeżeli sobie zasymulujemy słabsze urządzenie jak na przykład

3:30telefon komórkowy i powiedzmy że chciałbym zwolnić mój procesor sześciokrotnie

3:34w komputerze tak to zasymulować to już wtedy będzie widać różnicę

3:39w tym panelu będziemy chcieli sobie nagrać fragment tego co dzieje się

3:43na naszej stronie i ważne jest to żeby tutaj nagrywać krótkie fragmenty żebyśmy

3:47mogli to przeanalizować więc nacisnę tutaj record następnie przesuń obraz

3:51i zatrzymamy nagranie więc zróbmy to teraz record przesuń

3:55obraz i zatrzymuję i teraz będziemy mieli

4:00taki dosyć skomplikowany widok który jednak jeżeli się wgryziemy w szczegóły to sporo

4:04nam powie po pierwsze różnymi kolorami jak widzisz zaznaczone są różne

4:08można powiedzieć akcje czyli najwięcej czasu tutaj zajęło scripting i jeszcze

4:12wspomnę o tym że tutaj spowolniliśmy sobie

4:15procesor więc normalnie byłoby to trochę szybciej

4:17i to pokazuje że dosyć sporo zasobów procesora

4:21było potrzebne na wykonanie skryptów javascript które umożliwiły

4:25nam przesunięcie tego obrazka tutaj jest użyte po prostu jQuery która jest dosyć sporą biblioteką

4:30następnie renderingi i to zajęło również sporo czasu przeglądarka

4:34musiała renderować obraz od nowa i również go malować więc na

4:38to warto zwrócić uwagę szczególnie jeżeli będziesz miał więcej animacji na stronie uwierz

4:42mi że nawet bardzo mocne komputery potrafią lagować zacinać te animacje

4:47jeżeli nie są one odpowiednio przygotowane i to można sprawdzić na przykład tutaj i

4:51mamy teraz tutaj taki wycinek od momentu jak wcisnąłem sobie record

4:55oraz stop który możemy sobie zawężać jeżeli będziemy potrzebowali i wtedy

4:59wszystkie statystyki pod spodem też będą się zmieniać niemniej jednak wciąż widzimy że

5:03szczególnie na tym odcinku kiedy dużo było rysowania widzisz podgląd

5:08tutaj że przesuwał się ten obrazek to sporo uwagi było poświęcone na rendering

5:12i widzimy że to jest potencjalne wąskie gardło chociaż jeżeli tutaj sobie zerkniemy

5:17na frame to widzimy że udało nam się to utrzymać w okolicach 58

5:2160 klatek na sekundę co przy odświeżaniu współczesnych wyświetlaczy

5:25czyli 60 Hz daje nam płynne animacje natomiast zapewniam

5:29cię że gdybyśmy mięli 10 jakichś obrazków które na raz się animują już by nam się nie udało

5:34tego utrzymać właśnie w takim krótkim czasie więc na jedną klatkę mamy

5:38około 16 milisekund jeżeli nasz kod będzie się wykonywał dłużej

5:42to wtedy mamy do czynienia z tak zwanym framedroping czyli

5:46będziemy widzieć takie lagowanie tej strony bo nie wszystkie klatki

5:50zdążę na czas się wyrenderować ok

5:55no i teraz co my tutaj możemy poprawić jeżeli już znajdziemy że wąskim gardłem u

5:59nas w tym przypadku nie jest jakiś problem ale jeżeli wąskim gardłem zobaczymy że u

6:03nas jest na przykład renderowanie to wtedy należy się zastanowić co robi nasz

6:07kod że strona musi na przykład często się renderować

6:11być może nie korzystamy z css3 i tak dalej tutaj te rzeczy będziemy

6:15mogli znaleźć jeżeli jeszcze będziemy się wgryzać w te szczegóły natomiast w tym

6:19przypadku nie ma takiej potrzeby bo ja wiem jaki jest tutaj problem i chciałem tylko

6:23sygnalizować że taki panel tutaj jest który jak wspomniałem jest dosyć zaawansowany

6:28teraz chciałem ci pokazać jak to się zmieni kiedy

6:32wykorzystamy animacje w css3 którą ja mam tutaj tutaj jest

6:36zwykła animacja wykonana przez

6:40jQuery animate a w tym skrypcie skończony mamy transition która wykorzystuje

6:44css3 więc przejdę sobie teraz do przykładów finish

6:50i wyczyścimy sobie to co tutaj mamy i znowu będę chciał nagrać przesunąć

6:55obraz i zatrzymać i teraz jak sobie zerkniemy

6:59to zauważysz że mamy już zdecydowanie mniej renderingu renderingu

7:03ale na pewno dużo mniej Paintingu tutaj z kolei Scripting teraz

7:07zajął więcej czasu z jakiegoś powodu oczywiście

7:10to również może się zmieniać przybliżmy sobie

7:12zatem dokładnie w to miejsce które mieliśmy wcześniej ok ten scripting tutaj

7:16już jest zdecydowanie mniejszy teraz i jeszcze

7:21zawęzimy z tej strony czy dokładnie tutaj na tym zielonym gdzie ja widzę ten paint i

7:25widzimy teraz że tego parkingu jest zdecydowanie mniej bo ta animacja była

7:29po prostu bardziej wydajna i teraz jak sobie przeskoczymy po tych klatkach widzimy że tutaj

7:33podobnie około tych 60 udało się utrzymać w tym przykładzie może

7:38nie jest to aż tak bardzo widoczne ale zapewniam cię

7:40że jak masz problemy z tym że na przykład twoja

7:42strona laguje to włącz sobie nagrywanie powiedzmy przescrolluj stronę

7:46bo być może masz jakieś infinite scroll lub tego typu rzeczy zatrzymaj

7:50i spróbuj przeanalizować czego tutaj jest najwięcej czy najwięcej jest wykonywania skryptów

7:55czy może renderingu czy malowania jeżeli tego renderingu

7:59jest najwięcej to oznacza to że w tych skryptach bardzo

8:03mocno modyfikuje layout twojej strony a czasami nie jest to po prostu konieczne

8:07można te skrypty po prostu lepiej zoptymalizować lub wykorzystać na przykład css3

8:12do jakichś animacji i będzie to wyglądało dużo lepiej