Analizator wodospadów plików HAR

Plik HAR (archiwum HTTP) to eksport JSON wszystkiego, co panel sieciowy DevTools przeglądarki zarejestrował podczas ładowania strony: każdy nagłówek żądania i odpowiedzi, dokładny rozmiar i typ MIME każdej treści odpowiedzi oraz podział czasu na żądanie. Możesz go utworzyć w przeglądarce Chrome, Firefox, Edge lub Safari, otwierając DevTools, ponownie ładując stronę na karcie Sieć, a następnie klikając prawym przyciskiem myszy listę żądań i wybierając „Zapisz wszystko jako HAR z zawartością”. To narzędzie bezpośrednio odczytuje wyeksportowany plik — nic nie jest ponownie pobierane ani żądane.

Wykres kaskadowy jest zbudowany w całości z danych znajdujących się już w pliku: własny obiekt synchronizacji każdego wpisu dzieli żądanie na fazy zablokowane, wyszukiwanie DNS, połączenie, negocjację SSL/TLS, wysyłanie, oczekiwanie (czas do pierwszego bajtu) i odbieranie, a każda faza jest rysowana jako własny kolorowy segment. Zgodnie ze specyfikacją HAR czas SSL jest również uwzględniany w połączeniu, więc jest najpierw odejmowany — w przeciwnym razie część TLS byłaby liczona dwukrotnie, a szerokość pasków nie byłaby już sumowana do rzeczywistego czasu trwania żądania. Pionowe znaczniki przerywane pokazują DOMContentLoaded i Load, odczytywane bezpośrednio z czasów poszczególnych stron pliku, dzięki czemu można dokładnie zobaczyć, które żądania zostały zakończone, zanim strona stała się interaktywna.

Poza wykresem narzędzie uruchamia trzy reguły wyszukiwania dla pól zarejestrowanych już w formacie HAR. Oznacza odpowiedzi, które można zapisać w pamięci podręcznej (stan 200, 203 lub 206), które nie zawierają ani nagłówka Cache-Control, ani Expires, co oznacza, że ​​przy kolejnej wizycie konieczne jest ponowne pobranie ich od zera. Oznacza odpowiedzi tekstowe — HTML, CSS, JavaScript, JSON, SVG i podobne — większe niż 1 KB, które zostały dostarczone bez kodowania treści, co jest łatwą możliwością kompresji, którą większość serwerów może włączyć za pomocą jednej linii konfiguracyjnej. Flaguje także żądania CSS lub JavaScript, które rozpoczęły się przed własnym przesunięciem DOMContentLoaded strony, klasycznym podpisem zasobu blokującego renderowanie.

Wszystko to działa na danych, które już znajdują się w przesyłanym pliku — nie ma dostępu do sieci, zewnętrznej usługi wyszukiwania ani ponownego pobierania oryginalnej strony. Plik HAR jest odczytywany, analizowany i renderowany w całości na karcie przeglądarki i nigdy nie jest nigdzie przesyłany.