Chrome'da Web Ses uygulamalarının profilini oluşturma

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 profillendireceğinizi öğrenin.

Bu belgeye muhtemelen Web Audio API'yi kullanan bir uygulama geliştirirken ulaştınız ve çıkıştan gelen patlama sesleri gibi beklenmedik sorunlar yaşadınız veya beklenmedik bir ses duyuyorsunuz. crbug.com tartışmasına katılmış olabilirsiniz ve bir Chrome mühendisi sizden "izleme verilerini" yüklemenizi veya grafik görselleştirmesini incelemenizi istemiş olabilir.

Sorunu anlayıp temelindeki problemi çözebilmemiz için gerekli bilgileri nasıl edineceğinizi öğrenin.

Web Audio profil oluşturma araçları

Web Audio'yu profillerken size yardımcı olacak iki araç vardır: about://tracing ve Chrome Geliştirici Araçları'ndaki WebAudio uzantısı.

about://tracing'yı ne zaman kullanırsınız?

Gizemli "aksaklıklar" yaşandığında İzleme araçlarıyla uygulamanın profilini çıkarma size şu konularda bilgi verir:

• Farklı iş parçacıklarında belirli işlev çağrıları tarafından harcanan zaman dilimleri
• Zaman çizelgesi görünümünde sesli geri arama zamanlaması

Genellikle cevapsız sesli geri arama son tarihlerini veya beklenmedik ses hatalarına neden olabilecek büyük atık toplama işlemlerini gösterir. Bu bilgiler, temel bir sorunu anlamak için yararlıdır. Bu nedenle, Chromium mühendisleri özellikle yerel olarak yeniden üretme mümkün olmadığında bu bilgileri sıklıkla ister. Genel izleme talimatlarımızı inceleyin.

Web Audio DevTools uzantısını ne zaman kullanırsınız?

Ses grafiğini görselleştirmek ve ses oluşturucunun anlık olarak nasıl performans gösterdiğini izlemek istediğinizde. Bir ses akışı oluşturmak ve sentezlemek için kullanılan AudioNode nesnelerden oluşan bir ağ olan ses grafiği genellikle karmaşık hale gelir ancak grafik topolojisi tasarım gereği opak olur. (Web Audio API'de düğüm/grafik inceleme özellikleri yoktur.) Grafiğinizde bazı değişiklikler oluyor ve artık sessizlik duyuyorsunuz. Ardından, dinleyerek hata ayıklama zamanı gelir. Bu işlem hiçbir zaman kolay değildir ve daha büyük bir ses grafiğiniz olduğunda daha da zorlaşır. Web Audio DevTools uzantısı, grafiği görselleştirerek size yardımcı olabilir.

Bu uzantıyla, web ses oluşturucunun belirli bir oluşturma bütçesi (ör.yaklaşık 2,67 ms @ 48 KHz) üzerinde nasıl performans gösterdiğini belirten, oluşturma kapasitesinin tahmini bir değerini izleyebilirsiniz. Kapasite %100'e yaklaştığında, oluşturucu verilen bütçedeki işi tamamlayamadığı için uygulamanızda aksaklıklar oluşabilir.

about://tracing hareketini kullanın

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ği başlatabilir veya farklı sürüm kanallarından (ör. Beta veya Canary) diğer derlemeleri kullanabilirsiniz. Tarayıcıyı hazırladıktan sonra:

1. Uygulamanızı (web sayfanızı) bir sekmede açın.
2. Başka bir sekme açıp about://tracing adresine gidin.
3. Kaydet düğmesine basın ve Ayarları manuel olarak seç'i belirleyin.
4. Hem Kayıt Kategorileri hem de Varsayılan Olarak Devre Dışı Bırakılan Kategoriler bölümlerinde Yok düğmelerine basın.
5. Kayıt Kategorileri bölümünde aşağıdakileri seçin:
   • audio
   • blink_gc
   • media
   • v8.execute (AudioWorklet JS kodu performansıyla ilgileniyorsanız)
   • webaudio
6. Varsayılan Olarak Devre Dışı Bırakılan Kategoriler bölümünde aşağıdakileri seçin:
   • audio-worklet (AudioWorklet dizisinin nerede başladığını öğrenmek istiyorsanız)
   • webaudio.audionode (Her AudioNode için ayrıntılı izlemeye ihtiyacınız varsa)
7. En alttaki Kaydet düğmesine basın.
8. Uygulama sekmenize geri dönün ve sorunu tetikleyen adımları tekrarlayın.
9. Yeterli izleme verisine sahip olduğunuzda izleme sekmesine geri dönüp Durdur'a basın.

10. İzleme sekmesi sonucu görselleştirir.

    

11. İ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 Worklet modu. Her mod farklı bir iş parçacığı modeli kullandığından izleme sonuçları da farklıdır.

İşletim sistemi modu

İşletim sistemi modunda, AudioOutputDevice iş parçacığı tüm web ses koduyla çalışır. AudioOutputDevice, tarayıcının Ses Hizmeti'nden kaynaklanan ve ses donanımı saati tarafından yönlendirilen gerçek zamanlı bir öncelikli iş parçacığıdır. Bu kanaldaki izleme verilerinde düzensizlik görürseniz cihazdan gelen geri çağırma zamanlamasının titrek olabileceği anlamına gelir. Linux ve Pulse Audio'nun birlikte kullanıldığında bu soruna neden olduğu bilinmektedir.

Daha fazla bilgi için aşağıdaki Chromium sorunlarına bakın: #825823, #864463.

İş öğesi modu

AudioOutputDevice iş parçacığından AudioWorklet iş parçacığına tek bir iş parçacığı atlamasıyla karakterize edilen İşlet Modu'nda, iki iş parçacığı şeridinde iyi hizalanmış izler görmeniz gerekir. İşlet etkinleştirildiğinde tüm web ses işlemleri AudioWorklet iş parçacığı tarafından oluşturulur. Bu iş parçacığı gerçek zamanlı öncelikli değil.

Buradaki yaygın düzensizlik, atık toplama işleminden veya oluşturma son tarihlerinin kaçırılmasından kaynaklanan büyük bir bloktur. Her iki durumda da ses akışında aksaklıklar oluşur.

Her iki durumda da ideal izleme verileri, iyi hizalanmış ses cihazı geri arama çağrıları ve verilen oluşturma bütçesi içinde tamamlanan oluşturma görevleriyle karakterize edilir. İki ekran görüntüsü, ideal izleme verilerinin mükemmel örnekleridir.

Gerçek hayattan örneklerden öğrenme

1. örnek: Oluşturma bütçesini aşan 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çesini aştığı tipik bir örnektir. Geri çağırma zamanlaması düzgün ancak Web Audio API'nin ses işleme işlevi çağrısı, sonraki cihaz geri çağırmasından önce çalışmayı tamamlayamadı.

Seçenekleriniz:

• Daha az AudioNode örneği kullanarak ses grafiğinin iş yükünü azaltın.
• AudioWorkletProcessor içinde kodunuzun iş yükünü azaltın.
• AudioContext temel gecikmesini artırın.

2. örnek: İşletim birimi iş parçacığında önemli atık toplama işlemi

Çöp toplama, işletim sistemi ses oluşturma iş parçacığının aksine worklet iş parçacığı üzerinde yönetilir. Bu nedenle, kodunuz bellek ayırma/ayırma işlemi yapıyorsa (ör. yeni diziler) sonunda çöp toplama işlemi tetiklenir ve bu işlem, iş parçacığını eşzamanlı olarak engeller. Web Audio işlemleri ve atık toplama işlemlerinin iş yükü, belirli bir oluşturma bütçesinden büyükse ses akışında aksaklıklar oluşur. 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 temelinde farklı tasarım kalıpları kullanın. Bu mükemmel bir çözüm olmasa da yoğun ses kodunu çalıştırmak için çeşitli web ses uygulamalarında benzer bir SharedArrayBuffer düzeni kullanılır. Örnekler:
  • Audio Worklet Tasarım Kalıbı

3. örnek: AudioOutputDevice adlı kişiden gelen titrek ses cihazı geri bildirimi

Web Audio için en önemli şey, ses geri aramasının tam zamanlamasıdır. Bu, sisteminizdeki en hassas saat olmalıdır. İşletim sistemi veya ses alt sistemi sağlam bir geri arama zamanlaması sağlayamıyorsa sonraki tüm işlemler etkilenir. Aşağıdaki resimde, titrek sesli geri arama örneği gösterilmektedir. Önceki iki resimle karşılaştırıldığında, her geri arama arasındaki aralık önemli ölçüde değişir.

Seçenekleriniz:

• latencyHint seçeneğini ayarlayarak sistem ses geri çağırma arabellek boyutunu artırın.
• Bir sorunla karşılaşırsanız izleme verileriyle birlikte 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ından farklı olarak 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ükleme işleminden sonra, Chrome Geliştirici Araçları'nı açıp üst menüde "Web Audio"yu tıklayarak panele erişebilirsiniz.

Web Audio panelinde dört bileşen bulunur: bağlam seçici, özellik inceleyici, grafik görselleştirici ve performans izleyici.

Bağlam Seçici

Bir sayfada birden fazla BaseAudioContext nesne olabileceğinden bu açılır menü, incelemek istediğiniz bağlamı seçmenize olanak tanır. Soldaki çöp kutusu simgesini tıklayarak çöp toplama işlemini manuel olarak da tetikleyebilirsiniz.

Özellik Denetçisi

Yan panelde, kullanıcı tarafından seçilen bir bağlamın çeşitli özellikleri gösterilir veya AudioNode. AudioParam'da 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 bir şekilde değişir. Görselleştirmede bir öğeyi tıklayarak özellik denetçisindeki ayrıntılı bilgileri inceleyebilirsiniz.

Performans izleyicisi

En alttaki durum çubuğu yalnızca seçilen BaseAudioContext, gerçek zamanlı olarak çalışan bir AudioContext olduğunda etkindir. Bu çubuk, seçilen bir AudioContext öğesinin anlık ses akışı kalitesini gösterir ve her saniye güncellenir. Aşağıdaki bilgileri sağlar:

• Geri arama aralığı (ms): Geri arama aralığının ağırlıklı ortalamasını veya varyansını gösterir. İdeal olarak ortalama sabit olmalı ve varyans sıfıra yakın olmalıdır. Büyük bir varyans görüyorsanız sistem düzeyindeki ses geri arama işlevinin, ses akışının kalitesini düşürebilecek dengesiz bir zamanlamaya sahip olduğu anlamına gelir. (3. örneğe bakın).

• Oluşturma kapasitesi (yüzde): Kapasite %100'e yaklaştığında oluşturucunun belirli bir oluşturma bütçesi için çok fazla işlem yaptığı anlamına gelir.Bu nedenle, daha az işlem yapmayı (ör. grafikte daha az AudioNodes nesnesi kullanma) düşünmelisiniz.

Çöp kutusu simgesini tıklayarak çöp toplayıcıyı manuel olarak tetikleyebilirsiniz.

Eski WebAudio Geliştirici Araçları paneli

Uzantı artık Chrome Web Audio ekibi tarafından önerilen bir yöntemdir ancak eski WebAudio Geliştirici Araçları 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ın, ardından Diğer araçlar ve WebAudio'ya gidin.

Sonuç

Ses hatalarını ayıklamak zordur. Tarayıcıda ses hatalarını ayıklamak daha da zordur. Ancak bu araçlar, web ses kodu performansıyla ilgili faydalı analizler sunarak bu zorluğu azaltabilir. Ancak bazı durumlarda Chrome'da veya uzantıda sorunlar yaşayabilirsiniz. crbug.com adresinden veya uzantı sorun izleyicisinden hata bildiriminde bulunun.