Narzędzia Deweloperskie w Przeglądarce: Pomiary pamięci

0:00W tej lekcji przejdziemy do zakładki memory i tutaj będę

0:04chciał ci pokazać w jaki sposób możemy zobaczyć ile pamięci ram zajmuje

0:08nasza aplikacja i tutaj będziemy mogli znaleźć problemy na

0:13przykład z wyciekami pamięci na czym one polegają za sekundę powiem ale najpierw

0:17pokażę ci jeszcze jedną fajną rzecz w chrome możemy przejść tutaj do menu wybrać more

0:21tools i task manager i to nam pokaże tutaj różne otwarte

0:25zakładki tutaj mamy ile

0:29zajmuje jak widzisz ile jest CPU ale także ile pamięci zajmują

0:34nasze poszczególne zakładki więc na przykład zakładka tab kurs narzędzia ponad

0:38600 mb z jakiegoś powodu zajmuje a druga którą mam otwartą

0:42tylko 54 mb no i tutaj jest

0:46to istotne ile pamięci zajmuje która zakładka ale nie aż tak bardzo istotne

0:51jest czy ta pamięć rośnie jeżeli zobaczysz że te wartości tutaj cały czas rosną

0:55i nie maleją to znaczy że na twojej stronie

0:57jest jakiś wyciek pamięci na przykład jakieś

0:59dane są doczytywane a nie są odpowiednio oczyszczone czyli gdzieś

1:03do nich jakieś odwołania są i tak zwane garbage collector nie może i wyczyścić

1:07i tak dalej pokażę ci to na pewnym przykładzie stworzyłem sobie taki

1:11przykład że mam funkcje get long string i mam taki string który nazwał long

1:15string i potem 1000000 razy dodaje do niego randomowy ciąg znaków

1:19więc będzie to bardzo duży string i później go zwracam i

1:24zauważ co robi linijkę poniżej do zmiennej long string przypisuję

1:29wywołanie tej funkcji to oznacza że w tej zmiennej będę miał to co ta funkcja przy

1:33tej milionowej pętli nam wegeneruje no i ok wydaje się że nie

1:37jest to problemem to będzie sporo pamięci zajmować ale przecież kiedyś zostanie przez ten

1:42garbage collector czyli odświecacz usunięte niestety

1:46tak się nie stanie bo poniżej mówimy na kliknięcie przycisku chcemy

1:50zrobić console.log tego long string i garbage collector w javascripcie

1:54działa tak że tak długo jak gdziekolwiek jest odwołanie do jakiejś zmiennej

1:59czyli do jakiegoś obiektu nie może go usunąć z pamięci dlaczego

2:03dlatego że nawet za godzinę jak ta strona będzie otwarta kliknę tutaj

2:07kliknij mnie to musi się w konsoli pokazać ten długi ciąg znaków a więc

2:11nie ma możliwości żeby go usunąć jedyna możliwość byłaby taka żeby

2:15usunąć ten event handler tutaj mamy tak

2:20że po pierwszym kliknięciu on się usunie i zobaczmy zaraz czy nam to zadziała

2:24wtedy ten garbage collector wbudowany w silnikach do obsługi języka javascript

2:28wie że w zasadzie z naszego kodu już nigdzie nie da się odwołać do tej zmiennej

2:32i może wyczyścić to z pamięci więc zobaczmy może najpierw tutaj

2:36w zakładce memory co się dzieje nasza strona nasza aplikacja zajmuje

2:41nam chodzi o sam javascript jak widzisz bo cała widzieliśmy że zajmowała ponad

2:45pół gb ale sam javascript

2:49zajmuje nam tutaj 70 mb i teraz jeżeli

2:53sobie kliknę ten przycisk w konsoli wyświetlimy cały

2:57ten string ok wróćmy do zakładki memory i zobaczmy czy coś się dzieje pamięć

3:01nam jeszcze wzrosła jak możesz teraz zobaczyć ale pod po

3:05chwili zaczęła spadać dlaczego tak się stało jeżeli wszedł do konsoli wyczyszczę

3:09bo jeżeli kliknę ponownie a ten przycisk to zauważ że już

3:13nam się to ponownie nie wyświetla i tak się stało dlatego że mam do

3:17przycisku przypisane zdarzenie kliknięcia one czyli mówię tylko raz jak

3:21się na niego kliknie wywołaj tam funkcje a potem już nie i to co jQuery robi

3:26pod spodem tak naprawdę to usuwa całą tę funkcję czyli

3:30do niej odwołanie usuwa a więc garbage collector widzi że w tej funkcji było odwołanie

3:34do long string tak naprawdę ta funkcja przestaje istnieć nie jest już przypisana

3:38do kliknięcia więc skoro już nigdzie indziej nie ma dostępu do long

3:42string to możemy to po prostu usunąć gdybym tutaj miał on to tak

3:46zrobić by nie można było natomiast teraz ci pokażę co byłoby w

3:50tej sytuacji wydajniejsze jeżeli zawartości tej zmiennej nie potrzebuję nigdzie

3:54indziej to wystarczyłoby wstawić ją tutaj w zasadzie

4:00nawet niżej czyli nie będziemy generować tego stingu który

4:04zajmuje dużo pamięci dopóki nie klikniemy tego przycisku

4:08i że jeżeli teraz odświeżę tą stronę to możemy zobaczyć

4:12że ona nam zajmuje tam 30 kilka megabajtów natomiast dopiero

4:16jak kliknę tutaj kliknij mnie to ta pamięć nam podskoczy powinniśmy to

4:20tutaj widzieć podskoczyła do 80 zalogowaliśmy to w konsoli i

4:25znowu może zacząć spadać dlatego że z żadnego miejsca

4:29w naszym kodzie nie da się odwołać do tej zmiennej a więc garbage collector może ją usunąć

4:33gdybyśmy z kolei tutaj zrobili takie psikusy i napisali window i

4:37cokolwiek mogłoby to być long string równa się long string

4:42to byśmy powiedzieli że na obiekcie globalnym window ma być dostęp

4:46do tej zmiennej i wtedy garbage collector nigdy nie będzie mógł jej usunąć bo wiemy

4:50że z dowolnego miejsca naszej aplikacji moglibyśmy wpisać window long string dopiero

4:54jak byśmy pisali window long string równa się null to zostałoby to usunięte

4:59więc mam nadzieję że tutaj rozumiesz jak działa garbage collector natomiast panel memory

5:03pozwala nam zdiagnozować te wszystkie problemy i teraz jeszcze pokażę

5:07ci jak można wykonać tak zwany snapshot żeby to potwierdzić czyli jeżeli zrobimy

5:11tak że przy wczytywaniu naszego kodu od razu zapiszemy do zmiennej ten

5:15długi string i on będzie czekał aż klikniemy w przycisk odświeżmy

5:20sobie tutaj i w panelu memory będę chciał wykonać snapshot tutaj

5:24musimy sekundę poczekać snapshot się wykonał i zajmuje prawie 70

5:29megabajtów to tutaj będziemy mogli zobaczyć co ile w naszym kodzie javascript konkretnie

5:33zajmuje i mamy coś takiego jak Shallow Size czyli jakby płytki rozmiar i Retained Size

5:38Retained to jest to ile to naprawdę zajmuje czyli jeżeli garbage collector

5:42będzie mógł to usunąć to tyle odzyskamy z pamięci natomiast Shallow Size

5:46może być bardzo malutki bo to jest jakby rozmiar powiedzmy zmiennej

5:50która przechowuje wskaźnik do tego Retained Size

5:55więc tak naprawdę możemy sobie tutaj po tym posortować i

5:59zobaczyć no i jeżeli przyjdziemy to widzimy że string zajmują dosyć

6:03dużo albo tutaj mamy nawet jeszcze więcej concatenated string i jeżeli

6:07tutaj przejdziemy to się za moment okaże że tutaj jest właśnie ten nasz konkatenowany string

6:11bo zauważ że ja tutaj robiłem konkatenację i on się tutaj pokazał

6:16więc możemy zdiagnozować że faktycznie coś tutaj mamy co dużo zajmuje i

6:20niekoniecznie tutaj być powinno natomiast jeżeli sobie teraz to wyciągniemy

6:25stąd i wstawimy tylko w to miejsce odświeżę

6:29stronę ten snapshot nam tutaj zostanie wykonam to wiemy

6:34że wygeneruje się długi string zostanie wypisane

6:36i tak naprawdę garbage collector może go usunąć

6:38z pamięci to jeżeli teraz wykonam kolejny snapshot tutaj klikamy na profiles

6:42wykonam sobie snapshot zobaczymy

6:47ile będzie zajmował być może zrobiłem trochę za

6:49szybko nie bo tutaj jeszcze na tym przycisku chciałem

6:51ci powiedzieć że możemy wymusić garbage collectora żeby on usunął to co może usunąć

6:55i jeżeli nie wymusimy to co jakiś czas jest to usuwane widzimy że teraz to zajmuje

6:59sporo mniej no i możemy sobie takie dwa snapshoty porównać wybierzemy

7:04sobie tutaj Comparison i chcęmy porównać do snapshotu 7

7:08i zobaczymy co zostało dodane pomiędzy tymi dwoma co

7:12zostało usunięte i tak dalej oczywiście ja nie musiałem przeładowywać strony czasem

7:16może być tak że po prostu wykonasz jakąś wykonasz sobie snapshot zobaczysz ile

7:20masz pamięci klikniesz coś żeby wykonać jakąś akcję w twojej aplikacji i

7:24wykonasz kolejny snapshot i zobaczysz na ile się zmieniła pamięć więc

7:28tutaj moglibyśmy sobie to wszystko po prostu porównać to jest również dosyć skomplikowane

7:32ale pozwala nam pokazać ile pamięci zajmuje nasza aplikacja

7:36i czy nie mamy przypadkiem jakiegoś problemu z pamięcią czyli musimy też

7:41zwracać uwagę na to jak przypisujemy jakieś zdarzenia do elementów i tak dalej do

7:45jakich zmiennych one mają dostęp i co w tych zmiennych ewentualnie może być

7:49problemy może być też na przykład tak zwanej infinity scroll kiedy scrollujemy

7:53stronę i wczytujemy ciągle nowe dane które będą przechowywane gdzieś w jakiejś tablicy

7:57a także później odzwierciedlane jako elementy na stronie również

8:01powinniśmy wtedy zadbać o to żeby te elementy u góry tak naprawdę kasować

8:05kiedy pokazujemy kolejne i tak dalej to naprawdę tutaj będzie można znaleźć

8:09na koniec jednak chciałbym ci pokazać że mamy taki przykład taką stronkę Memory leak demo

8:14tutaj jakbyś się zagłębił w kod to jest pokazane w

8:18jaki sposób można właśnie zrobić taki leak czyli wyciek pamięci

8:22kiedy ta pamięć w nieskończoność rośnie i jeżeli sobie teraz tutaj przejdziemy

8:26i klikniemy Leak JS memory to widzimy że nam to rośnie i

8:30będzie to widać w tym miejscu więc tutaj również możesz to zauważyć albo w tym

8:34task manager że masz jakiś problem bo pamięć twojej aplikacji cały

8:38czas wzrasta a to oznacza że po jakimś czasie po prostu ta aplikacja się

8:42wykrzaczy bo zabraknie pamięci operacyjnej w systemie ok odświeżę

8:46żeby zabić ten proces i to by było tyle jeżeli chodzi o panel memory

8:51i performance i memory są tak naprawdę bardzo zaawansowane i

8:55korzystaj z nich jeżeli będziesz czuł że coś

8:57jest nie tak z twoją aplikacją że być może

8:59gdzieś nie działa tak wydajne jak powinna myślę że tutaj powinieneś znaleźć

9:03odpowiedzi na twoje problemy