Narzędzia Deweloperskie w Przeglądarce: Pomiary szybkości akcji

0:00Przechodzimy do kolejnego tematu czyli do wydajności aplikacji na

0:05początek będę chciał ci pokazać fajne api które jest dostępne w przeglądarkach które

0:09pozwoli ci mierzyć czas pomiędzy pewnymi akcjami można powiedzieć

0:13że możesz zmienić czas pomiędzy wykonaniem się na przykład jednej a drugiej linijki

0:17kodu i dawniej robiło się to w ten sposób że powiedzmy jeżeli chcielibyśmy zobaczyć

0:21ile upłynęło pomiędzy kliknięciem tego przycisku a wczytaniem

0:25się czyli pobraniem tych danych i wykonaniem się na przykład

0:29tej linijki to zrobilibyśmy sobie tutaj na przykład w zmiennej date now

0:34i porównywali byśmy daty ale nie jest to najbardziej dokładny sposób dlatego

0:38pokażę ci że możemy w przeglądarkach korzystać z api która nazywa się performance api

0:43wystarczy że w jednym miejscu wpiszemy performance

0:47następnie mark czyli chcemy coś zaznaczyć i możemy tutaj podać

0:51dowolny string jak chcemy to nazwać na przykład powiedzmy

0:55że jest to clik i teraz przyjdziemy w inne miejsce czyli naprzykład tutaj wpiszemy

0:59performance mark i powiedzmy loaded

1:04możesz to nazwać tak jak chcesz i teraz będziemy sobie

1:08mogli zmierzyć ile czasu upłynęło pomiędzy tym miejscem a

1:12tym miejscem i wyświetlić sobie to w konsoli żeby to zrobić piszemy

1:16performance i następnie measure czyli zmierz musimy

1:20podać tutaj nazwę jaką chcemy na przykład Ajax bo jest tu to wczytanie się

1:25się i następnie musimy podać pomiędzy jakimi punktami

1:29chcemy to zmierzyć czy pierwszy nazwaliśmy click a więc podaje click a drugi nazwaliśmy

1:33loaded a więc zróbimy to w ten sposób to natomiast nam nie wystarczy

1:38bo musimy jeszcze w konsoli zrobić sobie console.log więc

1:42zróbmy to tak żeby to wyświetlić piszemy performance i

1:46następnie getEntries tutaj tego byłoby bardzo dużo więc

1:50piszemy sobie getEntriesByType ważne abyś po prostu wiedział że tymi

1:55kilkoma linijkami można to zrobić a w razie czego

1:59odsyłam jeszcze do dokumentacji i teraz jeżeli zrobimy sobie coś takiego przejdziemy

2:04tutaj do konsoli odświeży ten stronę żeby ten skrypt się wczytał zrobię wyślij zapytanie

2:08to powinno nam się to wyświetlić i widzimy coś taiego jak Performance

2:13Measure i możemy sobie dokładnie tutaj zobaczyć ile czasu to wszystko trwało

2:17a więc pomiędzy start a end

2:21jak widać było 3 sekundy mogli byśmy sobie jeszcze zerknąć tutaj

2:25do xhr i zobaczyć rzeczywiście ile nam to wszystko zajęło

2:29a więc samo pobranie jak tutaj widać to było

2:33ponad jedną sekundę natomiast całość trwała prawie

2:373 sekundy możemy spróbować jeszcze raz jeżeli ten przycisk gdzieś tutaj jest dostępny okej

2:42teraz on jest nieaktywny więc odświeżmy spróbujmy jeszcze raz

2:49i widzimy że teraz było to dwie sekundy więc ten czas może się zmieniać oczywiście w przypadku Ajaxa

2:53bardziej lub mniej ale w ten sposób możesz również mierzyć wydajność

2:57swojej aplikacji kiedy wykonujesz jakieś obliczenia lub robisz jakieś inne skomplikowane

3:02rzeczy warto po prostu wiedzieć że takie api istnieje