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 Sesi uygulamalarının performansını nasıl profilleyeceğinizi öğrenin.

Hongchan Choi

Bu makaleye büyük olasılıkla Web Audio API kullanan bir uygulama geliştirdiğiniz ve çıkıştan gürültü çıkarma gibi beklenmedik aksaklıklar yaşadığınız veya beklenmedik bir şey duyduğunuz için ulaştınız. Zaten bir crbug.com tartışmasına dahil olmuş olabilirsiniz ve bir Chrome mühendisi "izleme verileri" yüklemenizi veya grafik görselleştirmeye bakmanızı istedi. Bu makalede, bir sorunu anlayabilmemiz ve sonunda altta yatan sorunu düzeltebilmemiz için alakalı bilgileri nasıl edineceğimiz gösterilmektedir.

Web sesi profili oluşturma araçları

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

about://tracing ürününü ne zaman kullanıyorsunuz?

Gizemli "aksaklıklar" olduğunda. İzleme araçlarıyla uygulamanın profilini oluşturmak, aşağıdakiler hakkında bilgi verir:

• 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 beklenmedik ses arızalarına neden olabilecek sesli geri çağırma son tarihlerinin kaçırıldığını veya büyük bir çöp toplama özelliğinin kaçırıldığını gösterir. Bu bilgiler altta yatan bir sorunu anlamak için faydalı olduğundan, Chromium mühendisleri özellikle yerel üremenin uygun olmadığı durumlarda bunu sorar. İzlemeyle ilgili genel talimatları burada bulabilirsiniz.

Web Audio DevTools uzantısını ne zaman kullanıyorsunuz?

Ses grafiği görselleştirmek ve ses oluşturucunun gerçek zamanlı performansını izlemek istediğinizde. Bir ses akışını üretmek 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.) Grafiğinizde bazı değişiklikler olur ve sessizlik duyarsınız. Daha sonra sıra dinleyerek hata ayıklamaya geliyor. Bu iş hiçbir zaman kolay değil, daha büyük bir ses grafiğiniz olduğunda daha zor hale geliyor. Web Audio Geliştirici Araçları uzantısı, grafiği görselleştirerek size yardımcı olabilir.

Bu uzantıyla, web ses oluşturucusunun belirli bir oluşturma bütçesinde (ör. 48 KHz'de yaklaşık 2,67 ms) nasıl performans gösterdiğini belirten anlık oluşturma kapasitesi tahminini izleyebilirsiniz. Kapasite yüzde 100'e yakınsa, oluşturucu belirtilen bütçe dahilinde işi tamamlayamadığı için uygulamanız muhtemelen hatalara neden olabilir.

about://tracing hareketini kullanın

İzleme verileri nasıl yakalanır?

Aşağıdaki talimatlar Chrome 80 ve sonraki sürümler için hazırlanmıştır.

En iyi sonucu elde etmek için diğer tüm sekmeleri ve pencereleri kapatıp 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ınız hazır olduğunda aşağıdaki adımları uygulayın:

1. Uygulamanızı (web sayfası) bir sekmede açın.
2. Başka bir sekme açıp about://tracing uygulamasına gidin.
3. Kaydet düğmesine basın ve Ayarları manuel olarak seç'i seçin.
4. Hem Kayıt Kategorileri hem de Varsayılan Kategoriler Tarafından Devre Dışı Bırakıldı bölümlerinde Yok düğmelerine basın.
5. Record Category (Kayıt Kategorileri) bölümünde aşağıdakileri seçin:
   • audio
   • blink_gc
   • media
   • v8.execute (AudioWorklet JS kod performansıyla ilgileniyorsanız)
   • webaudio
6. Varsayılan Kategoriler Olarak Devre Dışı Bırakıldı bölümünde aşağıdakileri seçin:
   • audio-worklet (AudioWorklet ileti dizisinin başladığı yerle ilgileniyorsanız)
   • webaudio.audionode (her AudioNode için ayrıntılı ize ihtiyacınız varsa)
7. Alt kısımdaki Kaydet düğmesine basın.
8. Uygulama sekmenize geri dönün ve sorunu tetikleyen adımları yeniden uygulayın.
9. Yeterli iz veriniz olduğunda, iz sekmesine geri dönün ve Durdur'a basın.

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

    

11. İzleme verilerini kaydetmek için Kaydet'e basın.

İz verileri nasıl analiz edilir?

İzleme verileri, Chrome'un web ses motorunun sesi nasıl oluşturduğunu görselleştirir. Oluşturucu iki farklı oluşturma moduna sahiptir: İşletim sistemi modu ve İş uygulaması modu. Her mod farklı bir iş parçacığı modeli kullandığından izleme sonuçları da farklılık gösterir.

İşletim sistemi modu

İşletim sistemi modunda AudioOutputDevice iş parçacığı tüm web ses kodunu çalıştırır. AudioOutputDevice, tarayıcının Ses Hizmeti'nden gelen ve ses donanım saatiyle desteklenen gerçek zamanlı öncelikli bir iş parçacığıdır. Bu şeritteki iz verilerinde düzensizliğe rastlarsanız, cihazdan gelen geri çağırma zamanlaması titreyebilir. Linux ve Pulse Audio kombinasyonunda bu sorunun olduğu bilinmektedir. Daha fazla ayrıntı için şu Chromium sorunlarını inceleyin: #825823, #864463.

İş akışı modu

AudioOutputDevice'den AudioWorklet iş parçacığına bir iş parçacığının atlamasıyla tanımlanan İş Akışı Modu'nda, aşağıda gösterildiği gibi iki iş parçacığı şeridinde iyi hizalanmış izler görmeniz gerekir. İş akışı etkinleştirildiğinde tüm web ses işlemleri AudioWorklet iş parçacığı tarafından oluşturulur. Bu ileti dizisi şu anda gerçek zamanlı öncelikli değil. Buradaki en yaygın düzensizlik, çöp toplama veya oluşturma sürelerinin kaçırılmasından kaynaklanan büyük bir engeldir. Her iki durumda da ses akışında aksamalar oluşur.

Her iki durumda da ideal izleme verileri, uygun şekilde ayarlanmış ses cihazı geri çağırma çağrılarıyla ve görevlerin, belirlenen oluşturma bütçesi dahilinde başarıyla tamamlanmasıyla tanımlanır. Yukarıdaki iki ekran görüntüsü, ideal iz verilerine ilişkin mükemmel örneklerdir.

Gerçek hayattan örneklerden ders alma

1. Örnek: Oluşturma bütçesinin ötesine geçen görevleri oluşturma

Aşağıdaki ekran görüntüsü (Chromium sorunu #796330), AudioWorkletProcessor kodundaki kodun çok uzun sürdüğünü ve belirli bir oluşturma bütçesinin ötesine geçtiğini gösteren tipik bir örnektir. Geri çağırma zamanlaması iyi davranmıştır ancak Web Audio API'sının ses işleme işlevi çağrısı, bir sonraki cihaz geri çağırmasından önce işi tamamlayamadı.

Seçenekleriniz:

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

2. Örnek: İş akışı iş parçacığında önemli ölçüde çöp toplama

İşletim sisteminin ses oluşturma iş parçacığından farklı olarak, atık toplama işlemi iş akışı iş parçacığı üzerinde yönetilir. Bu, kodunuz bellek ayırma/ayırma (ör. yeni diziler) yaparsa sonunda iş parçacığını eşzamanlı olarak engelleyen bir atık toplama işlemini tetikler. Web ses işlemlerinin ve atık toplama işlemlerinin iş yükünün belirli bir oluşturma bütçesinin üzerinde olması, ses akışında aksaklıklara yol açar. 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 temasına dayalı farklı tasarım kalıpları kullanın. Bu mükemmel bir çözüm olmasa da, bazı web ses uygulamaları yoğun ses kodlarını çalıştırmak için benzer SharedArrayBuffer kalıbı kullanır. Örnekler:
  • Ses İş Akışı Tasarım Kalıbı

3. Örnek: AudioOutputDevice adlı cihazdan titreyen ses cihazı geri arama

Sesli geri arama işleminin tam zamanlaması, web sesi için en önemli noktadır. Bu, sisteminizdeki en hassas saat olmalıdır. İşletim sistemi veya ses alt sistemi sağlam bir geri çağırma zamanlamasını garanti edemezse sonraki tüm işlemler etkilenir. Aşağıdaki resimde titreyen sesli geri geri arama örneği gösterilmektedir. Önceki iki resimle karşılaştırıldığında, her bir geri arama arasındaki aralık önemli ölçüde farklılık gösterir.

Seçenekleriniz:

• latencyHint seçeneğini ayarlayarak sistem sesli geri arama arabelleği boyutunu artırın.
• Bir sorun bulursanız izleme verileriyle crbug.com adresinde sorun bildirin.

Web Audio DevTools uzantısını kullanma

Ayrıca, Web Audio API için özel olarak tasarlanmış DevTools uzantısını da kullanabilirsiniz. İzleme aracının aksine bu, grafiklerin ve performans metriklerinin gerçek zamanlı olarak incelenmesini sağlar.

Bu uzantının Chrome Web Mağazası'ndan yüklenmesi gerekiyor.

Yükleme tamamlandıktan sonra, Chrome Geliştirici Araçları'nı açıp üstteki menüden "Web Audio"yu tıklayarak panele erişebilirsiniz.

Web Sesi panelinin dört bileşeni vardır: içerik seçici, özellik denetçisi, 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. Soldaki çöp kutusu simgesini tıklayarak çöp toplama işlemini manuel olarak da başlatabilirsiniz.

Özellik Denetçisi

Yan panelde, kullanıcı tarafından seçilen bağlamın veya AudioNode öğesinin çeşitli özellikleri gösterilir. AudioParam içinde dinamik değerlerin incelenmesi desteklenmez.

Grafik Görselleştirici

Bu görünüm, kullanıcı tarafından seçilen bağlamın geçerli grafik topolojisini oluşturur. Bu görselleştirme, dinamik ve gerçek zamanlı olarak değişir. Görselleştirmedeki bir öğeyi tıklayarak özellik inceleyicideki ayrıntılı bilgileri inceleyebilirsiniz.

Performans İzleyicisi

Alttaki durum çubuğu yalnızca seçilen BaseAudioContext gerçek zamanlı olarak çalışan bir AudioContext olduğunda etkindir. Bu çubuk, seçilen AudioContext öğesinin anlık ses akış kalitesini gösterir ve saniyede bir güncellenir. Bu sayfada aşağıdaki bilgiler sunulur:

• Geri çağırma aralığı (ms): Geri çağırma aralığının ağırlıklı ortalamasını/varyansını görüntüler. İdeal olarak ortalama değerin sabit, varyansın sıfıra yakın olması gerekir. Büyük bir sapma görürseniz bu, sistem düzeyinde ses geri çağırma işlevinin zamanlaması kararsız olduğu ve bu da düşük ses akışı kalitesine neden olabileceği anlamına gelir. (Yukarıdaki 3. örneğe bakın.)

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

Çöp kutusu simgesini tıklayarak bir çö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ıp Diğer araçlar'a, ardından WebAudio'ya gidin.

Sonuç

Ses hatalarını ayıklama zor bir işlemdir. Tarayıcıda ses hatalarını ayıklamak daha da zordur. Ancak bu araçlar, web ses kodunun nasıl performans gösterdiğine dair faydalı bilgiler sunarak acıyı hafifletebilir. Ancak bazı durumlarda Chrome'da veya uzantıda sorunlar bulabilirsiniz. Öyleyse crbug.com veya uzantı sorunu izleyicisinde hata bildiriminde bulunmaktan çekinmeyin.

Fotoğraf: Jonathan Velasquez'in Unsplash'ta