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

Jecelyn Yeen

Nancy Li

Panel Program profilujący JavaScript zostanie wycofany w Chrome 124. W przyszłości możesz profilować wydajność procesora Node.js za pomocą panelu Wydajność.

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

Już w Chrome 58 zespół Narzędzi deweloperskich planował wycofać program profilujący JS. Istnieje kilka przyczyn:

• Nie jest już aktywnie rozwijana. Program profilujący JS od kilku lat nie otrzymał żadnych poważniejszych aktualizacji, a nasz zespół nie ma zasobów, aby go rozwijać.
• Uproszczone profilowanie. Panel Wydajność jest już używany do różnego rodzaju analiz wydajności, a dzięki możliwości profilowania wydajności procesora JavaScript w środowisku Node.js warto skonsolidować wszystkie elementy w jednym miejscu, aby zapewnić spójność i wydajność.
• Panel Skuteczność jest lepszy. Stale go udoskonalamy, dodając nowe funkcje i ulepszenia, aby zwiększyć skuteczność i łatwiejsze w użyciu narzędzia do analizy skuteczności.

Co należy zrobić po wycofaniu tej funkcji?

Aby dowiedzieć się więcej o profilowaniu wydajności procesora JavaScript, przeczytaj artykuł o wydajności profilu Node.js profilu.

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

• Za pomocą wykresu płomieniowego możesz zidentyfikować wąskie gardła wydajności.

• Karty Od dołu do góry i Drzewo wywołań umożliwiają zrozumienie relacji między funkcjami.

Jak sobie radzimy z wycofywaniem?

Opracowaliśmy prototyp i opublikowaliśmy dokument Request for Comments (RFC) na GitHubie, aby uzyskać opinie deweloperów.

Ponadto kontaktujemy się z ekspertami ds. programistów w celu przetestowania prototypu i rozwiązania wszelkich wątpliwości oraz problemów, aby mieć pewność, że panel wydajności spełnia podstawowe potrzeby dotyczące profilowania.

Stopniowo wycofujemy go w 4 etapach, aby dać deweloperom wystarczającą ilość czasu na dostosowanie się i zastosowanie.

Najważniejsze problemy i sposoby ich rozwiązywania

Wśród otrzymanych opinii najbardziej palące obawy dotyczyły 3 głównych kwestii:

• Obsługiwany format pliku .cpuprofile. Program profilujący JS używa innego formatu pliku. Panel Wydajność powinien obsługiwać tę funkcję.
• Długi czas wczytywania. Szybkość ładowania panelu wydawała się powolna, co zakłócało proces profilowania.
• Brak selektora maszyn wirtualnych JavaScript. Brak selektora instancji maszyny wirtualnej JavaScript ograniczało możliwości profilowania w niektórych scenariuszach.

Przyjrzyjmy się każdemu z tych problemów i sprawdźmy, jak je rozwiązaliśmy.

Długi czas wczytywania

Deweloperzy informowali nas, że wczytywanie dużych plików danych w panelu Wydajność trwało zbyt długo i czasami ulegało awariom.

Przeanalizowaliśmy je za pomocą Narzędzi deweloperskich (nazywamy je „DevTools-on-DevTools”). Wykryliśmy problemy i wprowadziliśmy kilka optymalizacji:

• Struktura danych Set została zastąpiona Array.
• Usunięto zbędne struktury danych Map.
• Zrefaktoryzowano funkcje rekurencyjne na iteracyjne (pętle), aby zmniejszyć wykorzystanie stosu pamięci.

Rozwiązując te wąskie gardła, przyspieszyliśmy wczytywanie dużych plików o 80%. 🎉

Więcej informacji o tym, czego się dowiedzieliśmy, znajdziesz w tym poście: O 400% szybszy panel wydajności dzięki interpretacji.

Brak selektora maszyny wirtualnej JavaScript

W pierwszym prototypie brakowało selektora maszyny wirtualnej JavaScript. Programiści używają go do przechodzenia do bardziej szczegółowego widoku i koncentrowania się na analizie konkretnej maszyny wirtualnej.

Do panelu Wydajność dodaliśmy teraz selektor maszyny wirtualnej JavaScript. Pojawi się lista wszystkich dostępnych instancji maszyn wirtualnych JavaScript. Gdy wybierzesz instancję, panel Wydajność wczyta profil procesora tej konkretnej instancji.

Obsługuje format pliku cpuprofile

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

Natomiast program profilujący JS obsługiwał profile procesora, czyli pliki z rozszerzeniem .cpuprofile, które zawierają 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 przepływ pracy nie powinien uniemożliwiać deweloperom analizowania istniejących zasobów cpuprofile. Dlatego panel Wydajność obsługuje teraz zarówno pliki śledzenia, jak i profile procesora. Możesz zaimportować plik cpuprofile do sekcji Wydajność, a wczyta się on prawidłowo.

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

Gdy rozpoznamy 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 uprościć profilowanie zarówno w przypadku witryn internetowych, jak i wydajności procesora profilowania w aplikacjach Node.js i Deno.

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

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

• Prześlij nam sugestię lub opinię na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji     > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
• zatweetuj na @ChromeDevTools.
• Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.