Koniec z profilowaniem JS, procesorem profilowania z panelem wydajności

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

W Chrome 124 panel Programu profilującego JavaScript zostanie wycofany. Od tej pory możesz używać panelu Wydajność do profilowania wydajności procesora Node.js.

Dlaczego wycofujemy program profilujący JavaScript? (JS Profiler)

Już w Chrome 58 zespół narzędzi deweloperskich planował wycofanie profilatora JS. Oto kilka powodów:

  • Nie jest już aktywnie rozwijany. JS Profiler nie był aktualizowany od kilku lat, a zespół nie ma zasobów, aby kontynuować jego rozwój.
  • Bardziej spersonalizowane profilowanie. Panel Wydajność jest już używany do analizy wydajności, a dzięki możliwości profilowania wydajności procesora JavaScript w Node.js ma sens konsolidowanie wszystkiego w jednym miejscu, aby zapewnić spójność i skuteczność.
  • Panel Wydajność jest lepszy Cały czas ulepszamy to narzędzie, dodając do niego nowe funkcje i ulepszenia, dzięki czemu staje się ono coraz bardziej zaawansowanym i przyjaznym dla użytkownika narzędziem do analizy skuteczności.

Co należy zrobić po wycofaniu?

Więcej informacji o profilowaniu wydajności procesora w przypadku kodu JavaScript znajdziesz w artykule Profilowanie wydajności Node.js.

Oto kilka wskazówek dotyczących korzystania z panelu Skuteczność:

  • Aby zidentyfikować wąskie gardła wydajności, użyj wykresu płomienistego.

Wykres płomieniowy.

  • Aby poznać relacje między funkcjami, użyj kart Od dołu i Drzewo wywołań.

Karta Od dołu do góry.

Karta Drzewo wywołań.

Jak postąpić w przypadku wycofania?

Opracowaliśmy prototyp i opublikowaliśmy na GitHubie prośbę o komentarze (RFC), aby uzyskać opinie deweloperów.

Poza tym aktywnie zwracamy się do ekspertów ds. rozwoju o przetestowanie prototypu i rozwiązanie wszelkich problemów, aby panel Skuteczność spełniał podstawowe potrzeby związane z profilowaniem.

Aby dać deweloperom wystarczająco dużo czasu na dostosowanie się do zmian, stopniowo wycofujemy profil JS w 4 etapach.

Najważniejsze problemy i sposób ich rozwiązania

Wśród otrzymanych opinii najpilniejsze problemy dotyczyły 3 głównych kwestii:

  • Obsługa formatu pliku .cpuprofile. Narzędzie JS Profiler używa innego formatu pliku. Powinien to obsługiwać panel Wydajność.
  • Wolne wczytywanie Prędkość wczytywania panelu była zbyt wolna, co utrudniało proces profilowania.
  • Brak selektora maszyny wirtualnej JavaScript. Brak selektora wystąpienia maszyny wirtualnej JavaScript ograniczał możliwości profilowania w niektórych przypadkach.

Przyjrzyjmy się teraz każdemu z tych problemów i spójrzmy, jak go rozwiązaliśmy.

Wolne wczytywanie

Deweloperzy poinformowali nas, że wczytywanie dużych plików danych w panelu Wydajność zajmuje zbyt dużo czasu, a czasami panel się nawet zawiesza.

Narzędzia deweloperskie użyliśmy do analizowania Narzędzi deweloperskich (nazywamy to „Narzędzia deweloperskie w Narzędziach deweloperskich”). Wykryliśmy problemy i wprowadziliśmy kilka optymalizacji:

  • Struktury danych Set zostały zastąpione strukturami danych Array.
  • Usunięto niepotrzebne struktury danych Map.
  • Funkcje rekurencyjne zostały przekształcone w funkcje iteracyjne (pętle for), aby zmniejszyć wykorzystanie stosu pamięci.

Dzięki rozwiązaniu tych problemów udało nam się przyspieszyć wczytywanie dużych plików o 80%. 🎉

Więcej informacji o naszych wnioskach znajdziesz w tym poście na blogu: Panel wydajności 400 razy szybszy dzięki technologii perf-ception.

Brak selektora maszyny wirtualnej JavaScript

W pierwszym prototypie brakowało selektora maszyny wirtualnej JavaScript. Deweloperzy używają go do szczegółowej analizy konkretnej instancji maszyny wirtualnej.

Dodaliśmy do panelu Wydajność selektor maszyny wirtualnej JavaScript. Wyświetla listę wszystkich dostępnych maszyn wirtualnych JavaScript. Gdy wybierzesz instancję, panel Wydajność wczyta profil procesora dla tej konkretnej instancji.

Karta Drzewo wywołań.

Obsługa formatu pliku cpuprofile

Wcześniej panel Wydajność obsługiwał tylko pliki śledzone, czyli pliki JSON z tablicą zdarzeń śledzonych.

Z drugiej strony JS Profiler obsługiwał profile procesora, czyli pliki z rozszerzeniem .cpuprofile zawierające obiekt JSON. Wyglądają one tak:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

Nowy proces nie powinien uniemożliwiać deweloperom analizowania istniejących cpuprofile. Dlatego panel Wydajność obsługuje teraz zarówno pliki śledzone, jak i profile procesora. Plik cpuprofile możesz zaimportować do sekcji Skuteczność, a on zostanie prawidłowo załadowany.

W tle wykrywaliśmy różnice w strukturze obiektów za pomocą wyrażenia regularnego. Jeśli zawartość pliku zaczyna się od {"nodes":[, jest to profil procesora. W przeciwnym razie jest to plik śledzący.

Gdy zidentyfikujemy typ treści, przetwarzamy je zgodnie z odpowiednimi zasadami. W przypadku pliku śladu analizujemy zdarzenia i tworzymy osi czasu. W przypadku profilu procesora parsujemy obiekt JSON i tworzymy wykres płomienia.

Podsumowanie

Użyj panelu Wydajność, aby usprawnić profilowanie, zarówno w przypadku witryn, jak i profilowania wydajności procesora w aplikacjach Node.js i Deno.

Jeśli masz opinię lub sugestie, dodaj komentarz do tego błędu lub skontaktuj się z nami, korzystając z jednego z tych sposobów.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.