Dowiedz się, jak profilować wydajność aplikacji Web Audio w Chrome za pomocą about://tracing i Audion (rozszerzenia WebAudio w Narzędziach deweloperskich w Chrome).
Ten dokument został otwarty prawdopodobnie dlatego, że tworzysz aplikację, która korzysta z interfejsu Web Audio API, i wystąpiły w niej nieoczekiwane problemy, np. trzaski w dźwięku wyjściowym lub inne nieoczekiwane dźwięki. Może się zdarzyć, że uczestniczysz już w dyskusji na crbug.com, a inżynier Chrome poprosił Cię o przesłanie „danych śledzenia” lub sprawdzenie wizualizacji wykresu.
Dowiedz się, jak uzyskać odpowiednie informacje, abyśmy mogli zrozumieć problem i ostatecznie go rozwiązać.
Narzędzia do profilowania Web Audio
Podczas profilowania Web Audio przydadzą Ci się 2 narzędzia:about://tracing rozszerzenie WebAudio w Narzędziach deweloperskich w Chrome.
Kiedy używasz about://tracing?
gdy pojawiają się tajemnicze „usterki”; Profilowanie aplikacji za pomocą narzędzi do śledzenia pozwala uzyskać informacje o tych kwestiach:
- Przedziały czasu spędzone przez konkretne wywołania funkcji w różnych wątkach.
- Czas oddzwaniania w widoku osi czasu
Zwykle pokazuje przekroczone terminy wywołań zwrotnych audio lub duże czyszczenie pamięci, które mogą powodować nieoczekiwane zakłócenia dźwięku. Te informacje są przydatne do zrozumienia podstawowego problemu, dlatego inżynierowie Chromium często o nie proszą, zwłaszcza gdy lokalne odtworzenie problemu nie jest możliwe. Zapoznaj się z naszymi ogólnymi instrukcjami śledzenia.
Kiedy używać rozszerzenia Web Audio DevTools?
Gdy chcesz wizualizować wykres dźwięku i monitorować w czasie rzeczywistym działanie renderera dźwięku. Wykres audio, czyli sieć obiektów AudioNode do generowania i syntezowania strumienia audio, często jest złożony, ale topologia wykresu jest celowo nieprzejrzysta. (Interfejs Web Audio API nie ma funkcji introspekcji węzłów ani grafów). Na wykresie pojawiają się zmiany, a Ty słyszysz ciszę. Następnie czas na debugowanie przez słuchanie. Nigdy nie jest to łatwe, a staje się jeszcze trudniejsze, gdy masz większy wykres dźwięku. Rozszerzenie Narzędzia deweloperskie Web Audio może Ci pomóc, wizualizując wykres.
Dzięki temu rozszerzeniu możesz monitorować bieżące szacunki dotyczące możliwości renderowania, które wskazują, jak renderowanie dźwięku w internecie działa w ramach danego budżetu renderowania (np.około 2, 67 ms przy 48 kHz). Jeśli wykorzystanie mocy obliczeniowej zbliża się do 100%, oznacza to, że aplikacja prawdopodobnie będzie działać nieprawidłowo, ponieważ moduł renderujący nie jest w stanie wykonać pracy w ramach danego budżetu.
Używaj funkcji about://tracing
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 różnych kanałów wersji (np. wersji beta lub Canary). Gdy przeglądarka będzie gotowa:
- Otwórz aplikację (stronę internetową) na karcie.
- Otwórz inną kartę i przejdź na stronę
about://tracing. - Naciśnij przycisk Nagrywaj i wybierz Ręcznie wybierz ustawienia.
- W sekcjach Kategorie rekordów i Kategorie domyślnie wyłączone naciśnij przycisk Brak.
- W sekcji Kategorie rekordów wybierz te opcje:
audioblink_gcmediav8.execute(jeśli interesuje Cię wydajność koduAudioWorkletJS)webaudio
- W sekcji Kategorie domyślnie wyłączone wybierz te opcje:
audio-worklet(jeśli chcesz zobaczyć, gdzie zaczyna się wątekAudioWorklet)webaudio.audionode(jeśli potrzebujesz szczegółowego śledzenia każdegoAudioNode)
- U dołu naciśnij przycisk Nagraj.
- Wróć na kartę aplikacji i ponownie wykonaj czynności, które spowodowały problem.
- Gdy zgromadzisz wystarczającą ilość danych śledzenia, wróć na kartę śledzenia i kliknij Zatrzymaj.
Karta śledzenia wizualizuje wynik.
Kliknij Zapisz, aby zapisać dane śledzenia.
Jak analizować dane śledzenia
Dane śledzenia pokazują, jak silnik audio w Chrome renderuje dźwięk. Renderujący ma 2 tryby renderowania: tryb systemu operacyjnego i tryb workletu. Każdy tryb korzysta z innego modelu wątków, więc wyniki śledzenia też się różnią.
Tryb systemu operacyjnego
W trybie systemu operacyjnego wątek AudioOutputDevice wykonuje cały kod audio w internecie. Wątek AudioOutputDevice to wątek o priorytecie czasu rzeczywistego pochodzący z usługi audio przeglądarki, który jest sterowany przez zegar sprzętowy audio. Jeśli w danych śledzenia w tym pasmie zauważysz nieregularności, oznacza to, że czas wywołania zwrotnego z urządzenia może być niestabilny. Wiadomo, że ten problem występuje w przypadku połączenia systemu Linux i Pulse Audio.
Więcej informacji znajdziesz w tych zgłoszeniach problemów z Chromium: #825823, #864463.
Tryb workletu
W trybie Worklet, który charakteryzuje się jednym przeskokiem wątku z AudioOutputDevice do AudioWorklet, powinny być widoczne dobrze dopasowane ślady w 2 ścieżkach wątków. Gdy worklet jest aktywowany, wszystkie operacje audio w internecie są renderowane przez wątek AudioWorklet. Ten wątek nie jest priorytetem w czasie rzeczywistym.
Częstą nieprawidłowością jest duży blok spowodowany czyszczeniem pamięci lub przekroczeniem terminów renderowania. W obu przypadkach prowadzi to do zakłóceń w strumieniu audio.
W obu przypadkach idealne dane śledzenia charakteryzują się dobrze dopasowanymi wywołaniami zwrotnymi urządzenia audio i zadaniami renderowania, które są wykonywane w ramach danego budżetu renderowania. Dwa zrzuty ekranu to świetne przykłady idealnych danych śledzenia.
Uczenie się na podstawie przykładów z życia
Przykład 1. Zadania renderowania przekraczające budżet renderowania
Zrzut ekranu poniżej (problem w Chromium nr 796330) to typowy przykład sytuacji, w której kod w AudioWorkletProcessor działa zbyt długo i przekracza określony 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 następnym wywołaniem zwrotnym urządzenia.
Twoje opcje:
- Zmniejsz obciążenie wykresu audio, używając mniejszej liczby instancji
AudioNode. - Zmniejsz obciążenie kodu w
AudioWorkletProcessor. - Zwiększ podstawowe opóźnienie
AudioContext.
Przykład 2. Znaczne czyszczenie pamięci w wątku workletu
W przeciwieństwie do wątku renderowania dźwięku w systemie operacyjnym czyszczenie pamięci jest zarządzane w wątku workletu. Oznacza to, że jeśli Twój kod przydziela lub zwalnia pamięć (np. tworzy nowe tablice), w końcu wywoła czyszczenie pamięci, które synchronicznie blokuje wątek. Jeśli obciążenie operacjami Web Audio i czyszczeniem pamięci jest większe niż dany budżet renderowania, powoduje to zakłócenia w strumieniu audio. Poniższy zrzut ekranu przedstawia skrajny przykład takiej sytuacji.
Twoje opcje:
- Zarezerwuj pamięć z wyprzedzeniem i wykorzystuj ją ponownie, gdy tylko będzie to możliwe.
- Używaj różnych wzorców projektowych w zależności od
SharedArrayBuffer. Chociaż nie jest to idealne rozwiązanie, kilka aplikacji internetowych do obsługi dźwięku używa podobnego wzorca zSharedArrayBufferdo uruchamiania kodu audio wymagającego dużej mocy obliczeniowej. Przykłady:
Przykład 3. Wywołanie zwrotne z niestabilnego urządzenia audio z AudioOutputDevice
W przypadku dźwięku w przeglądarce najważniejsze jest dokładne określenie czasu wywołania zwrotnego dźwięku. Powinien to być najdokładniejszy zegar w systemie. Jeśli system operacyjny lub jego podsystem audio nie mogą zagwarantować dokładnego czasu wywołania zwrotnego, wszystkie kolejne operacje będą miały na to wpływ. Ilustracja przedstawia przykład wywołania zwrotnego audio z drganiami. W porównaniu z 2 poprzednimi obrazami interwał między poszczególnymi wywołaniami zwrotnymi znacznie się różni.
Twoje opcje:
- Zwiększ rozmiar bufora wywołań zwrotnych 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 Web Audio DevTools
Możesz też użyć rozszerzenia Narzędzi deweloperskich zaprojektowanego specjalnie z myślą o interfejsie Web Audio API. W przeciwieństwie do narzędzia do śledzenia zapewnia ono wgląd w wykresy i dane o skuteczności w czasie rzeczywistym.
To rozszerzenie należy zainstalować ze sklepu Chrome Web Store.
Po zainstalowaniu możesz otworzyć panel, klikając „Web Audio” w górnym menu Narzędzi deweloperskich w Chrome.
Panel Web Audio ma 4 komponenty: selektor kontekstu, inspektor właściwości, wizualizator wykresów i monitor wydajności.
Selektor kontekstu
Strona może zawierać wiele obiektów BaseAudioContext, więc to menu umożliwia wybór kontekstu, który chcesz sprawdzić. Możesz też ręcznie uruchomić odśmiecanie, klikając ikonę kosza po lewej stronie.
Inspektor właściwości
Panel boczny wyświetla różne właściwości wybranego przez użytkownika kontekstu lubAudioNode. Sprawdzanie wartości dynamicznych w AudioParam nie jest obsługiwane.
Wizualizator wykresów
Ten widok renderuje bieżącą topologię wykresu w kontekście wybranym przez użytkownika. Ta wizualizacja zmienia się dynamicznie w czasie rzeczywistym. Klikając element w wizualizacji, możesz sprawdzić szczegółowe informacje w inspektorze właściwości.
Monitor wydajności
Pasek stanu u dołu jest aktywny tylko wtedy, gdy wybrany BaseAudioContext jest AudioContext, który działa w czasie rzeczywistym. Ten pasek pokazuje chwilową jakość strumienia audio wybranego urządzenia AudioContext i jest aktualizowany co sekundę. Zawiera te informacje:
Odstęp wywołania zwrotnego (ms): wyświetla średnią ważoną lub wariancję odstępu wywołania zwrotnego. Idealnie średnia powinna być stała, a wariancja powinna być bliska zera. Jeśli zauważysz dużą rozbieżność, oznacza to, że funkcja wywołania zwrotnego audio na poziomie systemu ma niestabilne taktowanie, co może prowadzić do niskiej jakości strumienia audio. (Zobacz przykład 3).
Zdolność renderowania (w procentach): gdy wartość zbliża się do 100%, oznacza to, że moduł renderujący wykonuje zbyt dużo pracy w stosunku do danego budżetu renderowania, więc warto rozważyć zmniejszenie obciążenia (np. użycie mniejszej liczby obiektów
AudioNodesw grafie).
Możesz ręcznie uruchomić odśmiecanie, klikając ikonę kosza.
Starszy panel Narzędzi deweloperskich WebAudio
Rozszerzenie jest obecnie zalecaną metodą przez zespół Chrome Web Audio, ale dostępny jest też starszy panel narzędzi deweloperskich WebAudio. Aby otworzyć ten panel, kliknij menu „trzy kropki” w prawym górnym rogu Narzędzi deweloperskich, a następnie wybierz kolejno 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ć Ci pracę, dostarczając przydatnych informacji o działaniu kodu audio w internecie. W niektórych przypadkach możesz jednak napotkać problemy w Chrome lub rozszerzeniu. Zgłoś błąd na stronie crbug.com lub w narzędziu do śledzenia problemów z rozszerzeniami.