about://tracing ve Audion'u (Chrome Geliştirici Araçları'ndaki bir WebAudio uzantısı) kullanarak Chrome'da Web Audio uygulamalarının performansını nasıl profilleyeceğinizi öğrenin.
Bu makaleye muhtemelen Web Audio API kullanan bir uygulama geliştirdiğiniz ve çıkıştan gelen patlama sesleri gibi beklenmedik aksaklıklar yaşadığınız veya beklenmedik bir ses duyduğunuz için ulaştınız. crbug.com'da bir tartışmaya katılmış olabilirsiniz ve bir Chrome mühendisi sizden "izleme verilerini" yüklemenizi veya grafik görselleştirmesine bakmanızı istemiş olabilir. Bu makalede, bir sorunu anlayıp temel sorunu çözebilmemiz için ilgili bilgilerin nasıl alınacağı gösterilmektedir.
Web Audio profilleme araçları
Web Audio'nun ve Chrome DevTools'daki WebAudio uzantısının profilini çıkarırken size yardımcı olacak iki araç vardır.about://tracing
about://tracing ne zaman kullanılır?
Gizemli "aksaklıklar" olduğunda Uygulamanın profilini izleme araçlarıyla çıkarmak, aşağıdakiler hakkında bilgi edinmenizi sağlar:
- Farklı ileti dizilerinde belirli işlev çağrıları tarafından harcanan zaman dilimleri
- Zaman çizelgesi görünümünde sesli geri arama zamanlaması
Genellikle, sesli geri arama için kaçırılan son tarihleri veya beklenmedik ses hataları oluşturabilecek büyük çöp toplama işlemlerini gösterir. Bu bilgiler, temeldeki sorunu anlamak için yararlıdır. Bu nedenle Chromium mühendisleri, özellikle yerel yeniden oluşturma mümkün olmadığında bunu sık sık sorarlar. Takip ile ilgili genel talimatları burada bulabilirsiniz.
Web Audio DevTools uzantısını ne zaman kullanırsınız?
Ses grafiğini görselleştirmek ve ses oluşturma aracının gerçek zamanlı olarak nasıl performans gösterdiğini izlemek istediğinizde Ses akışı oluşturmak ve sentezlemek için kullanılan AudioNode nesnelerinden oluşan bir ağ olan ses grafiği genellikle karmaşık hale gelir ancak grafik topolojisi tasarım gereği opaktır. (Web Audio API'de düğüm/grafik iç gözlemi özellikleri yoktur.) Grafikinizde bazı değişiklikler olur ve artık sessizlik duyarsınız. Ardından, dinleyerek hata ayıklama zamanı gelir. Bu işlem hiç kolay değildir ve ses grafiğiniz ne kadar büyükse o kadar zor olur. Web Audio DevTools uzantısı, grafiği görselleştirerek size yardımcı olabilir.
Bu uzantı sayesinde, web ses oluşturma aracının belirli bir oluşturma bütçesinde (ör. 48 KHz'de yaklaşık 2,67 ms) nasıl performans gösterdiğini gösteren oluşturma kapasitesinin anlık tahminini izleyebilirsiniz. Kapasite yüzde 100'e yakınsa bu, oluşturma aracının işi belirtilen bütçede tamamlayamaması nedeniyle uygulamanızda muhtemelen aksaklıklar yaşanacağı anlamına gelir.
about://tracing hareketini kullanın
İzleme verileri nasıl yakalanır?
Aşağıdaki talimatlar Chrome 80 ve sonraki sürümler içindir.
En iyi sonuçlar için diğer tüm sekmeleri ve pencereleri kapatın ve uzantıları devre dışı bırakın. Alternatif olarak yeni bir Chrome örneğini başlatabilir veya farklı sürüm kanallarındaki (ör. Beta veya Canary) diğer derlemeleri kullanabilirsiniz. Tarayıcıyı hazırladıktan sonra aşağıdaki adımları uygulayın:
- Uygulamanızı (web sayfanızı) bir sekmede açın.
- Başka bir sekme açıp
about://tracingadresine gidin. - Kaydet düğmesine basın ve Ayarları manuel olarak seç'i belirleyin.
- Hem Kayıt Kategorileri hem de Varsayılan olarak devre dışı bırakılan kategoriler bölümlerinde Yok düğmelerine basın.
- Kayıt Kategorileri bölümünde şunları seçin:
audioblink_gcmediav8.execute(AudioWorkletJS kodu performansıyla ilgileniyorsanız)webaudio
- Varsayılan olarak devre dışı bırakılan kategoriler bölümünde aşağıdakileri seçin:
audio-worklet(AudioWorkletileti dizisinin nerede başladığını öğrenmek istiyorsanız)webaudio.audionode(herAudioNodeiçin ayrıntılı izlemeye ihtiyacınız varsa)
- Alt kısımdaki Kaydet düğmesine basın.
- Uygulama sekmesine geri dönüp sorunu tetikleyen adımları tekrarlayın.
- Yeterli izleme veriniz olduğunda izleme sekmesine geri dönün ve Durdur'a basın.
İzleme sekmesi, sonucu görselleştirir.
İzleme verilerini kaydetmek için Kaydet'e basın.
İzleme verilerini analiz etme
İzleme verileri, Chrome'un web ses motorunun sesi nasıl oluşturduğunu görselleştirir. Oluşturucunun iki farklı oluşturma modu vardır: İşletim sistemi modu ve iş parçası modu. Her mod farklı bir mesaj dizi modeli kullandığından izleme sonuçları da farklıdır.
İşletim sistemi modu
İşletim sistemi modunda, AudioOutputDevice iş parçacığı tüm web ses kodunu çalıştırır. AudioOutputDevice, ses donanım saati tarafından desteklenen tarayıcı ses hizmetinden gelen gerçek zamanlı öncelikli bir iş parçacığıdır. Bu şeritteki izleme verilerinde düzensizlik görürseniz cihazdan gelen geri çağırma zamanlaması düzensiz olabilir. Linux ve Pulse Audio kombinasyonunda bu sorunun yaşandığı bilinmektedir. Daha fazla bilgi için aşağıdaki Chromium sorunlarına bakın: #825823, #864463.
Worklet modu
AudioOutputDevice'ten AudioWorklet iş parçacığına tek bir iş parçacığı sıçramasıyla karakterize edilen iş parçası modunda, aşağıda gösterildiği gibi iki iş parçacığı şeridinde iyi hizalanmış izler görürsünüz. İş parçacığı etkinleştirildiğinde tüm web ses işlemleri AudioWorklet iş parçacığı tarafından oluşturulur. Bu ileti dizisi şu anda anlık öncelikli değil.
Buradaki yaygın düzensizlik, çöp toplama işlemi veya kaçırılan oluşturma son tarihleri nedeniyle büyük bir bloktur. Her iki durum da ses akışında aksamalara neden olur.
Her iki durumda da ideal izleme verileri, iyi uyumlu ses cihazı geri çağırma çağrıları ve belirli oluşturma bütçesi içinde tamamlanan oluşturma görevleri ile karakterize edilir. Yukarıdaki iki ekran görüntüsü, ideal izleme verilerine mükemmel örneklerdir.
Gerçek hayattan örneklerden öğrenme
1. Örnek: Oluşturma bütçesinin ötesine geçen oluşturma görevleri
Aşağıdaki ekran görüntüsü (Chromium sorunu #796330), AudioWorkletProcessor içindeki kodun çok uzun sürdüğü ve belirli bir oluşturma bütçesinin üzerine çıktığı durumların tipik bir örneğidir. Geri çağırma zamanlaması iyi çalışıyor ancak Web Audio API'nin ses işleme işlevi çağrısı, sonraki cihaz geri çağırmasından önce işi tamamlayamadı.
Seçenekleriniz:
- Daha az
AudioNodeörneği kullanarak ses grafiğinin iş yükünü azaltın. AudioWorkletProcessoriçindeki kodunuzun iş yükünü azaltın.AudioContexttemel gecikmesini artırın.
2. Örnek: Çalışma parçası iş parçacığında önemli miktarda çöp toplama
İşletim sistemi ses oluşturma iş parçacığındakinin aksine, çöp toplama işlemi iş parçacığı tarafından yönetilir. Yani kodunuzda bellek ayırma/ayrılma (ör. yeni diziler) işlemi yapılırsa sonunda bir çöp toplama işlemi tetiklenir ve bu işlem de iş parçacığını eşzamanlı olarak engeller. Web ses işlemlerinin ve çöp toplama işleminin iş yükü belirli bir oluşturma bütçesinden büyükse ses akışında aksaklıklar yaşanır. Aşağıdaki ekran görüntüsü bu durumun uç bir örneğidir.
Seçenekleriniz:
- Belleği önceden ayırın ve mümkün olduğunda yeniden kullanın.
SharedArrayBuffer'e göre farklı tasarım kalıpları kullanın. Bu mükemmel bir çözüm olmasa da yoğun ses kodunu çalıştırmak için birçok web ses uygulamasıSharedArrayBufferile benzer bir kalıp kullanır. Örnekler:
3. örnek: AudioOutputDevice adlı kullanıcıdan gelen ses cihazı geri çağırma işleminde takılma
Web Audio için en önemli şey, ses geri çağırma işleminin doğru zamanlamasıdır. Bu, sisteminizde en doğru saat olmalıdır. İşletim sistemi veya ses alt sistemi, geri arama zamanlamasını garanti edemiyorsa sonraki tüm işlemler etkilenir. Aşağıdaki resimde, ses geri çağırma işleminin kesintili olduğu bir örnek gösterilmektedir. Önceki iki resme kıyasla, her geri çağırma arasındaki aralık önemli ölçüde değişiyor.
Seçenekleriniz:
latencyHintseçeneğini ayarlayarak sistem ses geri çağırma arabellek boyutunu artırın.- Sorun bulursanız izleme verilerini ekleyerek crbug.com adresinden sorun bildirin.
Web Audio DevTools uzantısını kullanma
Web Audio API için özel olarak tasarlanmış Geliştirici Araçları uzantısını da kullanabilirsiniz. İzleme aracının aksine bu araç, grafiklerin ve performans metriklerinin gerçek zamanlı olarak incelenmesini sağlar.
Bu uzantının Chrome Web Mağazası'ndan yüklenmesi gerekir.
Yüklemeden sonra Chrome Geliştirici Araçları'nı açıp üst menüden "Web Audio"yu tıklayarak panele erişebilirsiniz.
Web Ses panelinde dört bileşen bulunur: bağlam seçici, mülk denetleyici, grafik görselleştirici ve performans izleyici.
Bağlam Seçici
Bir sayfada birden fazla BaseAudioContext nesnesi olabileceğinden bu açılır menü, incelemek istediğiniz bağlamı seçmenize olanak tanır. Ayrıca, soldaki çöp kutusu simgesini tıklayarak çöp toplama işlemini manuel olarak da tetikleyebilirsiniz.
Mülk denetçisi
Yan panelde, kullanıcı tarafından seçilen bir bağlamın veya AudioNode'ın çeşitli özellikleri gösterilir. AudioParam'teki dinamik değerlerin incelenmesi desteklenmez.
Grafik Görselleştirici
Bu görünüm, kullanıcı tarafından seçilen bir bağlamın mevcut grafik topolojisini oluşturur. Bu görselleştirme, gerçek zamanlı olarak dinamik olarak değişir. Görselleştirmedeki bir öğeyi tıklayarak mülk denetleyicisindeki ayrıntılı bilgileri inceleyebilirsiniz.
Performans İzleyicisi
Alt kısımdaki durum çubuğu yalnızca seçili BaseAudioContext, gerçek zamanlı çalışan bir AudioContext olduğunda etkindir. Bu çubuk, seçili bir AudioContext'ün anlık ses akış kalitesini gösterir ve saniyede bir güncellenir. Aşağıdaki bilgileri sağlar:
Geri çağırma aralığı (ms): Geri çağırma aralığının ağırlıklı ortalamasını/varyansını gösterir. İdeal olarak ortalama sabit olmalı ve varyans sıfıra yakın olmalıdır. Büyük bir fark görüyorsanız sistem düzeyindeki ses geri çağırma işlevinin kararsız zamanlaması vardır ve bu durum ses akışının kalitesinin düşmesine neden olabilir. (Yukarıdaki 3. örneğe bakın.)
Oluşturma Kapasitesi (yüzde): Kapasite yüzde 100'e yaklaştığında, oluşturucunun belirli bir oluşturma bütçesi için çok fazla iş yaptığı anlamına gelir.Bu nedenle, daha az işlem yapmayı (ör. grafikte daha az
AudioNodesnesnesi kullanmayı) düşünmeniz gerekir.
Çöp kutusu simgesini tıklayarak çöp toplayıcıyı manuel olarak tetikleyebilirsiniz.
Eski WebAudio DevTools paneli
Uzantı artık Chrome Web Audio ekibi tarafından önerilen bir yöntemdir ancak eski WebAudio DevTools paneli de kullanılabilir. Bu panele erişmek için Geliştirici Araçları'nın sağ üst köşesindeki "üç nokta" menüsünü tıklayıp Diğer araçlar'a, ardından WebAudio'ya gidin.
Sonuç
Sesle ilgili hataları düzeltmek zordur. Tarayıcıda sesle ilgili hata ayıklama işlemi daha da zordur. Ancak bu araçlar, web ses kodunun nasıl performans gösterdiğiyle ilgili faydalı bilgiler sağlayarak bu sorunu hafifletebilir. Ancak bazı durumlarda Chrome'da veya uzantıda sorun görebilirsiniz. Bu durumda crbug.com adresinden veya uzantı sorun izleyicisinden hata bildiriminde bulunabilirsiniz.
Fotoğraf: Jonathan Velasquez, Unsplash