Profilowanie aplikacji Web Audio w Chrome

Dowiedz się, jak profilować wydajność aplikacji Web Audio w Chrome przy użyciu about://tracing i Audion (rozszerzenia WebAudio dostępnego w Narzędziach deweloperskich w Chrome).

Zdarzyło Ci się przeczytać ten artykuł, prawdopodobnie dlatego, że tworzysz aplikację, która korzysta z interfejsu Web Audio API, i zauważasz nieoczekiwane zakłócenia, takie jak trzaski z danych wyjściowych, lub gdy słyszysz coś nieoczekiwanego. Być może uczestniczysz już w dyskusji na stronie crbug.com, a inżynier Chrome poprosił Cię o przesłanie „danych śledzenia” lub obejrzenie wizualizacji wykresu. Z tego artykułu dowiesz się, jak uzyskać odpowiednie informacje, które pomogą nam zrozumieć problem i ostatecznie go rozwiązać.

Narzędzia do profilowania Web Audio

Dostępne są 2 narzędzia pomocne przy profilowaniu Web Audio: about://tracing i rozszerzenie WebAudio w Narzędziach deweloperskich w Chrome.

Kiedy korzystasz z aplikacji about://tracing?

Kiedy zdarzają się tajemnicze „błędy”. Profilowanie aplikacji za pomocą narzędzi do śledzenia daje dostęp do informacji na temat:

• Wycinki czasu spędzone przez określone wywołania funkcji w różnych wątkach
• Czas wywołania zwrotnego audio w widoku osi czasu

Zwykle pokazuje nieodebrane terminy odpowiedzi audio lub duże ilości śmieciowych danych, które mogą powodować nieoczekiwane zakłócenia w dźwięku. Informacje te są przydatne w zrozumieniu przyczyny problemu, więc inżynierowie Chromium często pytają o nie, szczególnie wtedy, gdy lokalne odtworzenie problemu nie jest możliwe. Ogólne instrukcje śledzenia znajdziesz tutaj.

Kiedy używasz rozszerzenia Web Audio DevTools?

Gdy chcesz wizualizować wykres audio i monitorować w czasie rzeczywistym, jak działa mechanizm renderowania dźwięku. Audiograf, czyli sieć obiektów AudioNode służących do generowania i syntetyzowania strumienia audio, często staje się skomplikowana, ale topologia grafu z założenia jest nieprzezroczysta. (Web Audio API nie ma funkcji do introspekcji węzłów/wykresu). Na wykresie widać pewne zmiany, ale dźwięk będzie wyciszony. Potem czas na debugowanie nasłuchiwanie. Nigdy nie jest to łatwe, a coraz trudniejsze, gdy wykres audio jest większy. Rozszerzenie Web Audio DevTools może pomóc w wizualizacji wykresu.

Dzięki temu rozszerzeniu możesz śledzić szacunkową wydajność renderowania, która wskazuje wydajność mechanizmu renderowania audio internetowych w ramach określonego budżetu renderowania (np. około 2,67 ms przy 48 kHz). Jeśli pojemność zbliży się do 100%, oznacza to, że w aplikacji mogą występować błędy, ponieważ mechanizm renderowania nie jest w stanie ukończyć pracy przy danym budżecie.

Użyj formatu: about://tracing

Jak zbierać dane śledzące

Poniższe instrukcje dotyczą Chrome w wersji 80 i nowszych.

Aby uzyskać najlepsze rezultaty, zamknij wszystkie inne karty i okna oraz wyłącz rozszerzenia. Możesz też uruchomić nową instancję Chrome lub użyć innych kompilacji z innych kanałów wersji (np. Beta lub Canary). Po przygotowaniu przeglądarki wykonaj te czynności:

1. Otwórz aplikację (stronę internetową) na karcie.
2. Otwórz inną kartę i wejdź na stronę about://tracing.
3. Naciśnij przycisk Nagraj i wybierz Wybierz ustawienia ręcznie.
4. Naciśnij przyciski Brak w sekcji Rejestruj kategorie i Wyłączone przez kategorie domyślne.
5. W sekcji Record Kategorie (Kategorie rekordów) wybierz te opcje:
   • audio
   • blink_gc
   • media
   • v8.execute (jeśli interesuje Cię wydajność kodu JS AudioWorklet)
   • webaudio
6. W sekcji Wyłączone według kategorii domyślnych wybierz te opcje:
   • audio-worklet (jeśli chcesz wiedzieć, gdzie zaczyna się wątek AudioWorklet)
   • webaudio.audionode (jeśli potrzebujesz szczegółowego logu czasu dla każdego elementu typu AudioNode)
7. Naciśnij przycisk Record (nagrywaj) u dołu.
8. Wróć na kartę aplikacji i powtórz czynności, które spowodowały problem.
9. Gdy masz już wystarczająco dużo danych śledzenia, wróć na kartę śledzenia i naciśnij Zatrzymaj.

10. Wynik będzie widoczny na karcie śledzenia.

    

11. Kliknij Zapisz, by zapisać dane śledzenia.

Jak analizować dane śledzenia

Dane śledzenia wizualizują dźwięk, który jest renderowany przez internetowy mechanizm audio Chrome. Mechanizm renderowania ma 2 różne tryby renderowania: Tryb systemu operacyjnego i Tryb Worklet. Każdy tryb wykorzystuje inny model podziału na wątki, więc wyniki śledzenia również są różne.

Tryb systemu operacyjnego

W trybie systemu operacyjnego wątek AudioOutputDevice uruchamia cały kod audio z internetu. AudioOutputDevice to wątek o priorytecie w czasie rzeczywistym, który pochodzi z usługi audio przeglądarki i jest określany przez zegar sprzętowy audio. Jeśli dane śledzenia na tym pasie wykryją nieregularność, oznacza to, że czas wywołania zwrotnego z urządzenia może być zniekształcony. Problem ten występuje w przypadku połączenia systemu Linux i Pulse Audio. Aby dowiedzieć się więcej, przeczytaj te informacje o problemach z Chromium: #825823, #864463.

Tryb Worklet

W trybie Worklet, w którym jeden wątek przeskakuje z AudioOutputDevice do wątku AudioWorklet, powinny być dobrze wyrównane logi czasu w 2 ścieżkach wątków, jak pokazano poniżej. Po aktywowaniu workletu wszystkie operacje audio na stronie są renderowane przez wątek AudioWorklet. Ten wątek nie ma obecnie priorytetu w czasie rzeczywistym. Częstą nieregularnością jest duża bloka spowodowana odśmieceniem śmieci lub nieosiągniętymi terminami renderowania. W obu przypadkach występują zakłócenia w strumieniu audio.

W obu przypadkach idealne dane śledzenia cechują się dobrze dopasowanymi wywołaniami zwrotnymi wywołań zwrotnych urządzeń dźwiękowych i sprawnym renderowaniem zadań wykonywanych w ramach przy danym budżecie renderowania. Dwa zrzuty ekranu powyżej to doskonałe przykłady idealnych danych śledzenia.

Nauka na podstawie rzeczywistych przykładów

Przykład 1. Renderowanie zadań wykraczających poza budżet renderowania

Zrzut ekranu poniżej (problem nr 796330) przedstawia typowy przykład kodu w AudioWorkletProcessor, który trwa zbyt długo i wykracza poza określony budżet renderowania. Czas wywołania zwrotnego jest prawidłowy, ale wywołanie funkcji przetwarzania dźwięku interfejsu Web Audio API nie udało się zakończyć przed następnym wywołaniem zwrotnym urządzenia.

Dostępne opcje:

• Zmniejsz obciążenie wykresu audio, używając mniejszej liczby instancji AudioNode.
• Zmniejsz obciążenie kodu w AudioWorkletProcessor.
• Zwiększ podstawowy czas oczekiwania na AudioContext.

Przykład 2. Znaczące usuwanie odpadów w wątku workletu

W przeciwieństwie do wątku renderowania dźwięku w systemie operacyjnym proces czyszczenia pamięci jest zarządzany w wątku workletu. Oznacza to, że jeśli Twój kod wykonuje alokację pamięci (np. nowe tablice), wywołuje to czyszczenie pamięci, które synchronicznie blokuje wątek. Jeśli obciążenie internetowych operacji audio i od czyszczenia pamięci przekracza określony budżet renderowania, mogą wystąpić zakłócenia w strumieniu audio. Poniższy zrzut ekranu przedstawia skrajny przykład tej sytuacji.

Dostępne opcje:

• Przydziel pamięć z góry i wykorzystuj ją, gdy tylko jest to możliwe.
• Zastosuj różne wzory projektowe na podstawie: SharedArrayBuffer. Nie jest to idealne rozwiązanie, jednak niektóre internetowe aplikacje audio używają podobnego wzorca w przypadku funkcji SharedArrayBuffer do uruchamiania intensywnego kodu audio. Przykłady:
  • Wzorzec projektu Worklet audio

Przykład 3. Zaburzone wywołanie zwrotne urządzenia audio od: AudioOutputDevice

Dokładna godzina wywołania zwrotnego jest najważniejsza w przypadku internetowych treści audio. Powinien to być najbardziej dokładny zegar w Twoim systemie. Jeśli system operacyjny lub jego podsystem audio nie zagwarantuje poprawnego czasu wywołania zwrotnego, będzie to miało wpływ na wszystkie kolejne operacje. Poniższy obraz to przykład niestabilnego wywołania zwrotnego dźwięku. W porównaniu z poprzednimi 2 obrazami odstępy między wywołaniami zwrotnymi znacznie się różnią.

Dostępne opcje:

• Zwiększ rozmiar systemowego bufora wywołania zwrotnego dźwięku, dostosowując opcję latencyHint.
• Jeśli znajdziesz problem, zgłoś go na crbug.com i podaj dane śledzenia.

Używanie rozszerzenia Web Audio DevTools

Możesz też użyć rozszerzenia DevTools opracowanego specjalnie dla interfejsu Web Audio API. W przeciwieństwie do narzędzia do śledzenia zapewnia to kontrolę wykresów i wskaźników wydajności w czasie rzeczywistym.

To rozszerzenie należy zainstalować ze sklepu Chrome Web Store.

Aby uzyskać dostęp do panelu po instalacji, otwórz Narzędzia deweloperskie w Chrome i kliknij „Web Audio” w menu u góry.

Panel Web Audio ma 4 elementy: selektor kontekstu, inspektor właściwości, wizualizację wykresu i monitor wydajności.

Selektor kontekstu

Strona może zawierać wiele obiektów BaseAudioContext, dlatego to menu umożliwia wybór kontekstu, który chcesz zbadać. Czyszczenie pamięci można też włączyć ręcznie, klikając ikonę kosza po lewej stronie.

Inspektor właściwości

Panel boczny pokazuje różne właściwości kontekstu wybranego przez użytkownika, czyli AudioNode. Sprawdzanie wartości dynamicznych w obiekcie AudioParam nie jest obsługiwane.

Wizualizacja wykresów

Ten widok renderuje bieżącą topologię wykresu wybranego kontekstu. Wizualizacja zmienia się dynamicznie w czasie rzeczywistym. Klikając element w wizualizacji, możesz sprawdzić szczegółowe informacje w inspektorze właściwości.

Monitorowanie wydajności

Pasek stanu u dołu jest aktywny tylko wtedy, gdy wybrana wartość BaseAudioContext to AudioContext, która działa w czasie rzeczywistym. Ten słupek pokazuje jakość strumienia audio wybranego AudioContext i jest aktualizowany co sekundę. Zawiera następujące informacje:

• Interwał wywołania zwrotnego (ms): wyświetla ważoną średnią/wariancję interwału wywołania zwrotnego. Najlepiej, jeśli średnia powinna być stabilna, a wariancja powinna być bliska zera. Jeśli zauważysz dużą wariancję, oznacza to, że funkcja wywołania zwrotnego audio na poziomie systemu ma niestabilne czasy, co może prowadzić do niskiej jakości strumienia audio. (patrz przykład 3 powyżej).

• Możliwości renderowania (wartość procentowa): gdy pojemność zbliża się do 100%, oznacza to, że mechanizm renderowania wykonuje za dużo w ramach danego budżetu renderowania.Powinno być mniej zmian (np. zmniejszenie liczby obiektów AudioNodes na wykresie).

Moduł zbierający śmieci możesz ręcznie aktywować, klikając ikonę kosza.

Starsza wersja panelu narzędzi deweloperskich WebAudio

Rozwiązanie to jest obecnie zalecane przez zespół Chrome Web Audio, ale dostępny jest też starszy panel WebAudio DevTools. Aby uzyskać dostęp do tego panelu, kliknij menu z 3 kropkami w prawym górnym rogu Narzędzi deweloperskich, a następnie wybierz Więcej narzędzi i WebAudio.

Podsumowanie

Debugowanie dźwięku jest trudne. Debugowanie dźwięku w przeglądarce jest jeszcze trudniejsze. Narzędzia te mogą jednak ułatwić ten problem, dostarczając przydatnych informacji o wydajności kodu audio z internetu. Czasami jednak problemy mogą występować w Chrome lub rozszerzeniu. Nie bój się też zgłaszać błędów na stronie crbug.com ani w narzędziu do śledzenia błędów rozszerzeń.

Zdjęcie: Jonathan Velasquez, Unsplash