Dowiedz się, jak profilować wydajność aplikacji Web Audio w Chrome za pomocą about://tracing i Audion (rozszerzenia WebAudio w Narzędziach deweloperskich Chrome).
Ten artykuł został napisany, ponieważ prawdopodobnie opracowujesz aplikację, która korzysta z interfejsu Web Audio API, i wystąpiły u niej nieoczekiwane błędy, takie jak trzasknięcia na wyjściu lub nieoczekiwane dźwięki. Być może już uczestniczysz w dyskusji na stronie crbug.com, a inżynier Chrome poprosił Cię o przesłanie „danych śledzenia” lub zachęcił do zbadania wizualizacji wykresu. Z tego artykułu dowiesz się, jak uzyskać odpowiednie informacje, abyśmy mogli zrozumieć problem i ostatecznie rozwiązać jego przyczynę.
Narzędzia do profilowania dźwięku w przeglądarce
Do profilowania dźwięku w sieci służą 2 narzędzia: about://tracing oraz rozszerzenie WebAudio w Narzędziach deweloperskich w Chrome.
Kiedy warto używać about://tracing?
Gdy występują tajemnicze „usterki”. Profilowanie aplikacji za pomocą narzędzi do śledzenia daje Ci informacje o:
- Czas spędzony przez konkretne wywołania funkcji w różnych wątkach
- Czas trwania połączenia z powrotem z usługą obsługi klienta w widoku osi czasu
Zwykle pokazuje to przekroczone terminy wywołania dźwięku lub dużą ilość danych, które mogą powodować nieoczekiwane zakłócenia dźwięku. Te informacje są przydatne do zrozumienia problemu, dlatego inżynierowie Chromium często o nie pytają, zwłaszcza gdy nie można odtworzyć problemu lokalnie. Ogólne instrukcje dotyczące śledzenia znajdziesz tutaj.
Kiedy używać rozszerzenia Web Audio DevTools?
Gdy chcesz zwizualizować wykres audio i monitorować w czasie rzeczywistym działanie modułu do renderowania dźwięku. Graf audio, czyli sieć obiektów AudioNode służących do generowania i syntetyzacji strumienia audio, często staje się skomplikowany, ale jego topologia jest zaprojektowana tak, aby nie była przejrzysta. (interfejs Web Audio API nie zawiera funkcji do inspekcji węzła lub grafu). Na wykresie pojawiają się pewne zmiany, a Ty słyszysz ciszę. Teraz czas na debugowanie przez słuchanie. To nigdy nie jest łatwe, a w przypadku większych wykresów audio jest jeszcze trudniej. Rozszerzenie DevTools Web Audio może pomóc w wizualizacji wykresu.
Dzięki temu rozszerzeniu możesz monitorować bieżącą szacunkową wartość mocy renderowania, która wskazuje, jak wydajnie działa internetowy procesor audio w ramach określonego budżetu renderowania (np. około 2,67 ms przy 48 kHz). Jeśli pojemność zbliża się do 100%, oznacza to, że aplikacja prawdopodobnie będzie miała problemy, ponieważ renderowanie nie kończy się w ramach określonego budżetu.
Użyj konta about://tracing
Jak rejestrować dane dotyczące śledzenia
Poniższe instrukcje dotyczą Chrome 80 i nowszych wersji.
Aby uzyskać najlepsze wyniki, zamknij wszystkie inne karty i okna oraz wyłącz rozszerzenia. Możesz też uruchomić nową instancję Chrome lub użyć innych wersji z innych kanałów wersji (np. beta lub Canary). Gdy przeglądarka będzie gotowa, wykonaj te czynności:
- Otwórz aplikację (stronę internetową) na karcie.
- Otwórz kolejną kartę i przejdź na stronę
about://tracing. - Naciśnij przycisk Nagrywanie i wybierz Ręczne wybieranie ustawień.
- Naciśnij przyciski Brak w sekcji Kategorie rekordów i Kategorie wyłączone domyślnie.
- W sekcji Kategorie rekordów wybierz:
audioblink_gcmediav8.execute(jeśli interesuje Cię wydajność kodu JavaScript)AudioWorkletwebaudio
- W sekcji Wyłączone według domyślnych kategorii wybierz:
audio-worklet(jeśli chcesz wiedzieć, gdzie zaczyna się wątekAudioWorklet)webaudio.audionode(jeśli potrzebujesz szczegółowego śledzenia dla każdegoAudioNode)
- Naciśnij przycisk Nagrywanie u dołu ekranu.
- Wróć do karty aplikacji i ponowne wykonaj czynności, które spowodowały problem.
- Gdy masz już wystarczającą ilość danych, wróć do karty śledzenia i kliknij Zatrzymaj.
Na karcie śledzenia zobaczysz wizualizację wyniku.
Aby zapisać dane śledzenia, kliknij Zapisz.
Jak analizować dane śledzenia
Dane śledzenia wizualizują sposób renderowania dźwięku przez silnik audio przeglądarki Chrome. Ma on 2 tryby renderowania: tryb systemu operacyjnego i tryb workletu. Każdy tryb używa innego modelu wątku, więc wyniki śledzenia też się różnią.
Tryb systemu operacyjnego
W trybie systemu operacyjnego wątek AudioOutputDevice wykonuje cały kod audio internetowego. AudioOutputDevice to wątek priorytetowy w czasie rzeczywistym pochodzący z usługi audio przeglądarki, który jest sterowany przez zegar sprzętowy dźwięku. Jeśli na tym pasie widzisz nieprawidłowości w danych z wykrywania, oznacza to, że czas wywołania z urządzenia może być niestabilny. Wiemy, że ten problem występuje w połączeniu Linuxa i Pulse Audio. Aby uzyskać więcej informacji, zapoznaj się z tymi problemami w Chromium: #825823, #864463.
Tryb Worklet
W trybie zadania, który charakteryzuje się jednym przeskakiwaniem wątku z AudioOutputDevice do wątku AudioWorklet, powinny być widoczne dobrze wyrównane ścieżki na 2 pasach wątków, jak pokazano poniżej. Gdy aktywujesz worklet, wszystkie operacje związane z dźwiękiem w internecie są renderowane przez wątek AudioWorklet. Ten wątek nie jest obecnie priorytetowym wątkiem w czasie rzeczywistym.
Najczęstszą nieprawidłowością jest tu duży blok spowodowany przez zbieranie elementów do usunięcia lub przekroczenie terminów renderowania. W obu przypadkach dochodzi do zakłóceń strumienia audio.
W obu przypadkach idealne dane śledzenia charakteryzują się dobrze dopasowanymi wywołaniami wywołania zwrotnego urządzenia audio i zadaniami renderowania, które są wykonywane w ramach określonego budżetu renderowania. 2 zrzuty ekranu powyżej to świetne przykłady idealnych danych śledzenia.
Uczenie się na podstawie autentycznych przykładów
Przykład 1. Zadania renderowania przekraczające budżet renderowania
Zrzut ekranu poniżej (problem Chromium #796330) to typowy przykład sytuacji, w której kod w AudioWorkletProcessor zajmuje zbyt dużo czasu i przekracza podany budżet renderowania. Czas wywołania zwrotnego jest prawidłowy, ale wywołanie funkcji przetwarzania dźwięku w interfejsie Web Audio API nie zostało ukończone przed kolejnym wywołaniem zwrotnym urządzenia.
Opcje:
- Zmniejsz obciążenie grafu audio, używając mniejszej liczby instancji
AudioNode. - Zmniejsz obciążenie kodu w
AudioWorkletProcessor. - Zwiększ opóźnienie podstawowe
AudioContext.
Przykład 2. Znaczące usuwanie elementów zbędących z wątku zadania
W przeciwieństwie do wątku renderowania dźwięku w systemie operacyjnym, zbieranie pamięci zarządzane jest na wątku elementu roboczego. Oznacza to, że jeśli Twój kod przydziela lub zwalnia pamięć (np. nowe tablice), to w końcu uruchamia usuwanie elementów, które blokuje wątek asynchronicznie. Jeśli obciążenie operacjami związanymi z dźwiękiem internetowym i zbieraniem pamięci podręcznej jest większe niż określony budżet renderowania, może to spowodować zakłócenia w strumieniu audio. Na poniższym zrzucie ekranu widać skrajne użycie tego scenariusza.
Opcje:
- Przydzielaj pamięć z wyprzedzeniem i wykorzystuj ją ponownie, gdy tylko to możliwe.
- Używaj różnych wzorów projektowania na podstawie
SharedArrayBuffer. Chociaż nie jest to idealne rozwiązanie, wiele aplikacji internetowych do odtwarzania dźwięku używa podobnego wzorca zSharedArrayBufferdo uruchamiania intensywnego kodu audio. Przykłady:
Przykład 3. Wywołanie zwrotne urządzenia audio z wysokim opóźnieniem z adresu AudioOutputDevice
Najważniejsze w przypadku dźwięku w przeglądarce jest dokładne określenie czasu wywołania zwrotnego. Powinien to być najdokładniejszy zegar w systemie. Jeśli system operacyjny lub jego podsystem audio nie może zagwarantować stabilnego czasu połączenia zwrotnego, wpłynie to na wszystkie kolejne operacje. Na ilustracji widać przykład wywołania zwrotnego z niestabilnym dźwiękiem. W porównaniu z poprzednimi 2 obrazami odstęp między poszczególnymi wywołaniami funkcji zwracającej jest znacznie różny.
Opcje:
- Zwiększ rozmiar bufora wywołania zwrotnego dźwięku systemowego, dostosowując opcję
latencyHint. - Jeśli znajdziesz problem, zgłoś go na stronie crbug.com, podając dane śledzenia.
Korzystanie z rozszerzenia Narzędzia programistyczne dla Web Audio
Możesz też użyć rozszerzenia DevTools zaprojektowanego specjalnie dla Web Audio API. W przeciwieństwie do narzędzia do śledzenia umożliwia to sprawdzanie wykresów i danych o skuteczności w czasie rzeczywistym.
To rozszerzenie należy zainstalować ze sklepu Chrome Web Store.
Po zainstalowaniu panelu otwórz Narzędzia deweloperskie w Chrome i kliknij „Audio internetowe” w górnym menu.
Panel Web Audio ma 4 elementy: selektor kontekstu, inspektor właściwości, wizualizacja wykresu i monitor wydajności.
Selektor kontekstu
Strona może zawierać wiele obiektów BaseAudioContext, więc to menu umożliwia wybranie kontekstu, który chcesz sprawdzić. Możesz też ręcznie uruchomić zbieranie śmieci, klikając ikonę kosza po lewej stronie.
Inspektor nadzoru budowlanego
Panel boczny zawiera różne właściwości wybranego przez użytkownika kontekstu lub AudioNode. Sprawdzanie wartości dynamicznych w AudioParam nie jest obsługiwane.
Wizualizacja wykresu
Ten widok przedstawia bieżącą topologię grafu w wybranym przez użytkownika kontekście. Ta wizualizacja zmienia się dynamicznie w czasie rzeczywistym. Klikając element w wizualizacji, możesz wyświetlić szczegółowe informacje w inspektorze właściwości.
Monitorowanie wydajności
Pasek stanu u dołu jest aktywny tylko wtedy, gdy wybrany BaseAudioContextjest AudioContext, który działa w czasie rzeczywistym. Ten słupek pokazuje bieżącą jakość strumienia audio wybranego AudioContext i jest aktualizowany co sekundę. Zawiera ona te informacje:
Interwał wywołania zwrotnego (ms): wyświetla średnią ważoną/wariancję interwału wywołania zwrotnego. W idealnej sytuacji średnia powinna być stabilna, a wariancja powinna być zbliżona do zera. Jeśli zauważysz dużą rozbieżność, oznacza to, że funkcja wywołania z poziomu systemu audio ma niestabilny czas, co może powodować niską jakość strumienia audio. (patrz przykład 3 powyżej).
Zdolność do renderowania (procent): gdy zbliża się ona do 100%, oznacza to, że renderowanie wymaga zbyt dużych zasobów na renderowanie, dlatego warto je ograniczyć (np. używać w grafice mniejszej liczby obiektów
AudioNodes).
Możesz ręcznie uruchomić funkcję usuwania elementów, klikając ikonę kosza.
Starsza wersja panelu WebAudio w Narzędziach dewelopera
Rozszerzenie jest teraz zalecaną metodą przez zespół odpowiedzialny za dźwięk internetowy w Chrome, ale nadal dostępny jest też starszy panel narzędzi dewelopera WebAudio. Aby otworzyć ten panel, kliknij menu z 3 kropkami w prawym górnym rogu Narzędzi deweloperskich, a potem wybierz Więcej narzędzi, a następnie WebAudio.
Podsumowanie
Debugowanie dźwięku jest trudne. Debugowanie dźwięku w przeglądarce jest jeszcze trudniejsze. Te narzędzia mogą jednak ułatwić Ci pracę, dostarczając przydatnych statystyk dotyczących działania kodu audio w internecie. W niektórych przypadkach mogą jednak wystąpić problemy z Chrome lub rozszerzeniem. Nie bój się zgłaszać błędów na stronie crbug.com ani korzystać z śledzenia problemów z rozszerzeniami.
Zdjęcie: Jonathan Velasquez, Unsplash