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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

W Chrome 124 wycofamy panel JavaScript Profiler. 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 wersji Chrome 58 zespół Narzędzi deweloperskich planował ostatecznie wycofać narzędzie JS Profiler. 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 Skuteczność 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?

Aby dowiedzieć się więcej o profilowaniu wydajności procesora JavaScript, zobacz Profil 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.

  • Na kartach Od dołu do góry i Drzewo wywołań możesz poznać relacje między funkcjami.

Karta Od dołu do góry.

Karta Drzewo połączeń.

Jak poradzimy sobie z wycofaniem?

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

Dodatkowo aktywnie kontaktujemy się z ekspertami ds. programowania w celu przetestowania prototypu, rozwiązując wszelkie wątpliwości i problemy, aby mieć pewność, że panel Wydajność spełnia podstawowe potrzeby w zakresie profilowania.

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 najbardziej palące problemy skupiały się na 3 głównych kwestiach:

  • 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 scenariuszach.

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:

  • Zastąpiono kolumnę Set strukturami danych Array.
  • Usunięto niepotrzebne struktury danych Map.
  • Przekształciliśmy funkcje rekurencyjne na iteracyjne (dla pętli), 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 pierwotnym 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 śledzenia, 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 tylko zidentyfikujemy typ treści, odpowiednio je przetworzymy. W przypadku pliku śledzenia analizujemy zdarzenia i tworzymy oś czasu. W przypadku profilu procesora analizujemy obiekt JSON i tworzymy wykres płomieniowy.

Podsumowanie

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

Jeśli chcesz podzielić się opinią lub sugestiami, dodaj komentarz do tego błędu lub skontaktuj się z nami, korzystając z jednej z poniższych opcji.

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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.