Bagaimana Situs Web Memboroskan CPU dan Baterai

• Menemukan masalah: Menemukan masalah white noise yang muncul sesekali dari speaker di laptop baru. Suara itu hanya bisa terdengar di ruangan yang tenang.

• Analisis penyebab: Setelah memeriksa status audio sink PulseAudio, ditemukan bahwa pada status SUSPENDED tidak ada suara, tetapi pada status IDLE atau RUNNING muncul white noise.

• Masalah Firefox: Firefox terlihat sebagai program yang menggunakan audio sink, dan white noise tetap muncul meskipun tidak ada tab terbuka yang sedang memutar suara.

• Penyebab: Ternyata suara notifikasi dari outlook.office.com adalah penyebab masalah. Setiap kali menerima email, white noise mulai terdengar, dan hanya berhenti jika tab dimuat ulang atau Firefox dimulai ulang.

• Pengurasan baterai: Saat white noise muncul, penggunaan CPU dan baterai juga meningkat.

• Percobaan solusi: Mencoba menyelesaikan masalah dengan menonaktifkan notifikasi email, tetapi masalah serupa juga terjadi di situs web lain.

• Pemrosesan audio HTML/JavaScript: Metode untuk memutar audio mencakup tag `` dan WebAudio API. Ditemukan bahwa penyebab masalah muncul saat membuat AudioContext.

• Perbedaan Firefox dan Chrome: Chrome otomatis menghentikan pemborosan baterai/CPU setelah beberapa waktu, tetapi Firefox tidak.

• Solusi: Mengembangkan ekstensi yang otomatis menghentikan AudioContext dan menjalankannya kembali saat diperlukan. Tidak sempurna, tetapi cukup efektif.

[GN⁺]

Komentar Hacker News

• Masalah ini sudah direncanakan dan penting. Akan segera diperbaiki. Kami minta maaf karena belum terselesaikan karena masalah prioritas. Secara pribadi, ini punya prioritas tinggi

  • Ini lebih rumit daripada menghentikan audio context setelah jangka waktu tertentu, tetapi bisa diselesaikan. Orang lain sudah melakukannya, jadi ini memungkinkan. Saya siap berkompromi
  • Sumber: implementator Firefox dan editor standar Web Audio API

• Situs web yang membuka audio context dan tidak memutar apa pun kemungkinan sedang melakukan deteksi bot

  • Mesin browser dan sistem operasi lain mengimplementasikan pemrosesan audio secara berbeda. Jika memutar suara yang sama sekali tidak terdengar lalu merekamnya kembali, akan terbentuk sebuah signature
  • Signature ini bisa digunakan untuk memeriksa apakah browser berbohong tentang user agent, berjalan dalam mode headless, atau bukan pengguna sungguhan

• Saya penasaran apakah masalah yang sama juga terjadi pada perangkat Android

• White noise ini sudah lama membuat saya gila, tetapi saya tidak bisa melacaknya

  • Ikon "sedang diputar" tidak muncul di tab, dan membisukan tab juga tidak menghentikan noise
  • Membisukan Firefox lewat Windows volume mixer juga tidak menghentikan noise
  • Edit: bagi pengguna desktop, white noise ini terus mulai/berhenti sehingga sangat mengganggu

• Ketika output menjadi idle, sinyal SPDIF digital kehilangan sinkronisasi. Saat pemutaran dimulai lagi, perlu waktu untuk sinkron kembali, dan beberapa detik pertama audio pun hilang. Saya pernah menulis program yang menjaga output tetap terbuka tanpa membuang data ke jalur agar output tidak menjadi idle

  • Pada laptop, penghematan energi lebih penting

• Ini sepertinya bisa menjelaskan masalah di Android Firefox ketika ponsel kadang menghabiskan 10GB data per hari. Situs berita memutar audio dan memuat ulang iklan berulang kali, dan tab tidak masuk ke mode hemat daya karena audio. Saya sampai harus beralih ke Chrome karena tagihan data berulang

• Di Chromium, kode yang menangani penghentian ini ada di sini

  • Pada dasarnya, setelah mendeteksi sekitar 30 detik keheningan, ia beralih dari sink yang didukung perangkat audio OS ke null sink
  • Catatan: karena menggunakan clock yang berbeda dari perangkat audio, distorsi bisa muncul pada nada tertentu saat context akhirnya digunakan. Solusinya adalah situs menggunakan suspend resume API yang disebutkan dalam artikel

• Saya menemukan masalah serupa di macOS juga (konsumsi daya yang dipicu audio, tanpa white noise)

  • Saat ini coreaudiod di Mac saya menggunakan 20% CPU padahal tidak memutar apa pun. Saya berniat beralih ke browser lain sampai ini diperbaiki, tetapi saya tidak ingin meninggalkan Firefox
  • Update: tampaknya bug yang terkait, tetapi berbeda

• Masalah ini memperbaiki halaman depan https://www.dr.dk/

• Saya tidak begitu paham bagaimana audioContext diimplementasikan, tetapi ia sangat pintar dan dinamis. Memutar suara notifikasi itu seperti menggambar SVG dengan D3. Saya penasaran apakah ada hook serviceWorker pada API yang lebih efisien untuk mendaftarkan pekerjaan berulang sederhana seperti handler notifikasi