W Chrome 124 wycofamy panel JavaScript Profiler. W przyszłości używaj panelu Wydajność, aby profilować wydajność procesora Node.js.
Dlaczego wycofujemy program profilujący JavaScript? (Program profilujący JS)
Już w wersji Chrome 58 zespół Narzędzi deweloperskich planował ostatecznie wycofać narzędzie JS Profiler. Istnieje kilka przyczyn tej sytuacji:
- Nie jest już rozwijana. Program profilujący JS nie otrzymał żadnych większych aktualizacji od kilku lat, a zespół nie ma zasobów, aby dalej go rozwijać.
- Ulepszone profilowanie. Panel Wydajność jest używany do wszelkiego rodzaju analiz wydajności, a dzięki możliwości profilowania wydajności procesora JavaScript w Node.js ma sens, aby skonsolidować wszystkie informacje w jednym miejscu, aby zapewnić spójność i wydajność.
- Panel Skuteczność jest lepszy. Cały czas go ulepszamy, dodając nowe funkcje i ulepszenia, dzięki czemu jest ono bardziej wydajne i łatwiejsze w użyciu do analizy skuteczności.
Co trzeba zrobić po wycofaniu funkcji?
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ść:
- Za pomocą wykresu płomieniowego zidentyfikuj wąskie gardła wydajności.
- Na kartach Od dołu do góry i Drzewo wywołań możesz poznać relacje między funkcjami.
Jak poradzimy sobie z wycofaniem?
Opracowaliśmy prototyp i opublikowaliśmy na GitHubie żądanie komentarzy (RFC), aby uzyskać opinie od 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.
Stopniowo wycofujemy narzędzie JS Profiler w 4 etapach, aby dać deweloperom dostatecznie dużo czasu na dostosowanie się i zastosowanie.
Najważniejsze problemy i sposoby ich rozwiązywania
Wśród otrzymanych opinii najbardziej palące problemy skupiały się na 3 głównych kwestiach:
- Obsługiwany format pliku:
.cpuprofile. Program profilujący JS używa innego formatu pliku. Panel Skuteczność powinien obsługiwać tę funkcję. - Powolne wczytywanie. Szybkość wczytywania panelu wydawała się powolna, co zakłóca proces profilowania.
- Brak selektora maszyny wirtualnej JavaScript. Brak selektora instancji maszyny wirtualnej JavaScript ogranicza możliwości profilowania w niektórych sytuacjach.
Przyjrzyjmy się każdemu z tych problemów i zobaczmy, jak je rozwiązaliśmy.
Wolne wczytywanie
Deweloperzy zgłaszali nam, że wczytywanie dużych plików danych w panelu Wydajność trwało zbyt długo, a czasem nawet doszło do awarii.
Zastosowaliśmy Narzędzia deweloperskie do analizy Narzędzi deweloperskich (tzw. DevTools-on-DevTools). Wykryliśmy problemy i dokonaliśmy kilku optymalizacji:
- Zastąpiono kolumnę
Setstrukturami danychArray. - Usunięto niepotrzebne struktury danych
Map. - Przekształciliśmy funkcje rekurencyjne na iteracyjne (dla pętli), aby zmniejszyć wykorzystanie stosu pamięci.
Rozwiązując te wąskie gardła, przyspieszyliśmy ładowanie dużych plików o 80%. 🎉
Więcej informacji o tym, czego się dowiedzieliśmy, znajdziesz w tym poście na blogu: Szybszy panel wydajności o 400% dzięki skuteczności.
Brakujący selektor maszyny wirtualnej JavaScript
W pierwotnym prototypie brakowało selektora maszyny wirtualnej JavaScript. Deweloperzy korzystają z niej, aby przejść do bardziej szczegółowego widoku i skupić się na analizie konkretnej instancji maszyny wirtualnej.
Do panelu Skuteczność dodaliśmy selektor maszyn wirtualnych JavaScript. Wyświetla się lista wszystkich dostępnych instancji maszyn wirtualnych JavaScript. Gdy wybierzesz instancję, panel Wydajność wczyta profil procesora tej instancji.
Obsługa formatu pliku cpuprofile
Wcześniej panel Wydajność obsługiwał tylko pliki śledzenia, które są plikami JSON z tablicy zdarzeń śledzenia.
Z kolei JS Profiler obsługuje 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 elementów cpuprofile. Dlatego panel Wydajność obsługuje teraz zarówno pliki śledzenia, jak i profile procesora. Plik cpuprofile możesz zaimportować do sekcji Wydajność, a załaduje się on prawidłowo.
Za kulisami wykrywamy 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 śledzenia.
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
Panel Wydajność pozwoli Ci usprawnić profilowanie zarówno w przypadku witryn, jak i profilowania wydajności procesora w aplikacjach 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.
Pobierz kanały podglądu
Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.
Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome
Użyj poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.
- Prześlij nam sugestię lub opinię na crbug.com.
- Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich. - Opublikuj tweeta na stronie @ChromeDevTools.
- Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.