Panel Network (Sieć) w Narzędziach deweloperskich w przeglądarce ułatwia identyfikowanie zasobów i kiedy zostaną załadowane. Każdy wiersz w panelu Network odpowiada adres URL wczytywany przez Twoją aplikację internetową.
Zobacz, co wczytujesz
Opracowanie odpowiednich strategii buforowania dla aplikacji internetowej wymaga dzięki czemu dowiesz się, co dokładnie wczytujesz. Tworząc niezawodną sieć może podlegać różnego rodzaju siłom ciemności. Czynności, które musisz wykonać poznać luki w zabezpieczeniach sieci i rozwiązać je aplikacji.
Może Ci się wydawać, że masz już całkiem dobrą wiedzę na temat tego, gdy załaduje się aplikacja. Jeśli używasz małego rozproszenia statycznego kodu HTML, JavaScript, CSS i obrazy. Może się tak zdarzyć. Ale gdy tylko zaczniesz mieszanie zasobów zewnętrznych hostowanych w sieciach dostarczania treści, wykorzystując do tego dynamicznych żądań do interfejsu API i odpowiedzi generowanych przez serwer, obraz szybko staje się mroczny.
Strategia buforowania, która ma sens w przypadku kilku małych plików CSS, raczej nie zadziała. np. dla setek dużych obrazów.
Sprawdzaj, kiedy się wczytuje
Innym elementem ogólnego obrazu wczytywania jest moment, w którym wszystko się wczytuje.
Niektóre żądania wysyłane do sieci, na przykład żądanie nawigacji są wprowadzane bezwarunkowo z chwilą, gdy użytkownik odwiedzi Adres URL. Ten kod HTML może zawierać zakodowane na stałe odwołania do krytycznych elementów CSS lub JavaScript które też muszą się wczytać, by wyświetlić Twoją interaktywną stronę. Te wszystkie żądania znajdują się na krytycznej ścieżce wczytywania. Konieczna jest agresywna aby wszystko działało szybko.
Inne zasoby, takie jak żądania do interfejsu API lub zasoby leniwie ładowane, mogą nie zacznie się ładować aż do chwili zakończenia początkowego wczytywania. Jeśli żądania te następują dopiero po określonym sekwencji interakcji użytkownika, to zupełnie inny zestaw zasobów może podczas wielu wizyt na tej samej stronie. Mniej agresywna strategia buforowania to często są nieodpowiednie w przypadku treści, które zidentyfikowano jako znajdujące się poza krytycznej ścieżki wczytywania.
Kolumny Nazwa i Typ pomagają określić,
Kolumny Nazwa i Typ dają czytelny obraz tego, co wczytano. Odpowiedź na pytanie „co się wczytuje?”. w powyższym przykładzie to łącznie 4 adresy URL, z których każdy reprezentuje unikalny typ treści.
Nazwa to URL, którego zażądała przeglądarka – choć zobaczysz tylko
ostatni fragment ścieżki adresu URL na liście. Na przykład, jeśli
Załadowano https://example.com/main.css. Zobaczysz tylko main.css
w sekcji Nazwa.
Kilka ostatnich znaków ścieżki adresu URL, po fragmencie
kropka (np. „css”) są nazywane rozszerzeniem adresu URL.
Rozszerzenie adresu URL informuje zwykle o rodzaju żądanego zasobu,
i jest mapowany bezpośrednio na informacje wyświetlane w kolumnie Typ. Przykład:
v2.html to dokument, a main.css to arkusz stylów.
Kolumna „Kaskada” pomaga określić, kiedy
Obejrzyj kolumnę wodospadu, zaczynając od góry i kierując się w dół. długość każdego słupka odzwierciedla łączny czas wczytywania dla każdego zasobu. Jak odróżnić prośbę składaną jako z krytycznej ścieżki wczytywania i uruchamianym dynamicznie żądaniem, długo po zakończeniu wstępnego wczytywania strony?
pierwsze żądanie w kaskadzie będzie zawsze dotyczyło dokumentu HTML,
na przykład v2.html. Wszystkie kolejne żądania będą przesyłane (np.
kaskady!), na podstawie tego, jakie obrazy, skrypty
i styl, do którego odwołuje się dokument HTML.
Kaskada pokazuje, że gdy tylko v2.html się zakończy, żądania
dla zasobów, do których się on odnosi (nazywanych też zasobami podrzędnymi).
może zażądać wielu zasobów podrzędnych jednocześnie.
reprezentowane przez nakładające się słupki w kolumnie kaskady dla main.css i
logo.svg Na koniec możesz zobaczyć zrzut ekranu uruchamiający aplikację main.js
wczytuje się jako ostatni. Kończy je dopiero po zakończeniu działania pozostałych 3 adresów URL.
.