การทำโปรไฟล์แอป Web Audio ใน Chrome

ดูวิธีโปรไฟล์ประสิทธิภาพของแอป Web Audio ใน Chrome โดยใช้ about://tracing และ Audion (ส่วนขยาย WebAudio ใน Chrome DevTools)

คุณมาถึงบทความนี้เนื่องจากกำลังพัฒนาแอปที่ใช้ Web Audio API และพบข้อบกพร่องที่ไม่คาดคิด เช่น เสียงดังจากเอาต์พุต หรือได้ยินสิ่งที่ไม่คาดคิด คุณอาจได้เข้ามามีส่วนร่วมในการสนทนาใน crbug.com แล้ว และวิศวกรของ Chrome ได้ขอให้คุณอัปโหลด "ข้อมูลการติดตาม" หรือดูภาพกราฟแล้ว บทความนี้แสดงวิธีรับข้อมูลที่เกี่ยวข้องเพื่อให้เราเข้าใจปัญหาและแก้ไขปัญหาพื้นฐานได้ในที่สุด

เครื่องมือทำโปรไฟล์ Web Audio

มีเครื่องมือ 2 อย่างที่จะช่วยคุณทำโปรไฟล์ Web Audio ได้แก่ about://tracing และส่วนขยาย WebAudio ใน Chrome DevTools

คุณใช้ about://tracing เมื่อใด

เมื่อ "ข้อบกพร่อง" ลึกลับเกิดขึ้น การทำโปรไฟล์แอปด้วยเครื่องมือการติดตาม ช่วยให้คุณเห็นข้อมูลเชิงลึกเกี่ยวกับ

• ส่วนแบ่งเวลาที่ใช้ในการเรียกใช้ฟังก์ชันที่ระบุในชุดข้อความต่างๆ
• เวลาการติดต่อกลับด้วยเสียงในมุมมองไทม์ไลน์

โดยมักจะแสดงกำหนดเวลาของการติดต่อกลับทางเสียงที่ไม่ได้รับหรือการรวบรวมขยะขนาดใหญ่ซึ่งอาจทําให้เกิดข้อบกพร่องของเสียงที่ไม่คาดคิด ข้อมูลนี้มีประโยชน์ในการทําความเข้าใจปัญหาที่เป็นต้นเหตุ วิศวกรของ Chromium มักจะถามถึงปัญหา โดยเฉพาะอย่างยิ่งเมื่อการทำซ้ำในพื้นที่ไม่สามารถทำได้ ดูวิธีการทั่วไปในการติดตามได้ที่นี่

คุณจะใช้ส่วนขยาย Web Audio DevTools เมื่อใด

เมื่อต้องการดูภาพกราฟเสียงและตรวจสอบว่าตัวแสดงผลเสียงทำงานเป็นอย่างไรแบบเรียลไทม์ กราฟเสียงซึ่งเป็นเครือข่ายของออบเจ็กต์ AudioNode ที่สร้างและสังเคราะห์สตรีมเสียงมักจะมีความซับซ้อน แต่การออกแบบแล้วทำให้กราฟเสียงไม่ชัดเจน (Web Audio API ไม่มีฟีเจอร์สำหรับ การตรวจสอบโหนด/กราฟ) การเปลี่ยนแปลงบางอย่างเกิดขึ้นในกราฟของคุณ และคุณได้ยินเสียงเงียบ จากนั้นก็ถึงเวลาแก้ไขข้อบกพร่องด้วยการฟัง ไม่ใช่เรื่องง่ายเลย และจะยิ่งยากขึ้น เมื่อคุณมีกราฟเสียงที่มีขนาดใหญ่ขึ้น ส่วนขยาย Web Audio DevTools ช่วยคุณได้ด้วยการแสดงภาพกราฟ

ส่วนขยายนี้ช่วยให้คุณสามารถตรวจสอบปริมาณการแสดงผลโดยประมาณที่ใช้งานอยู่ ซึ่งจะแสดงประสิทธิภาพของโปรแกรมแสดงผลเสียงบนเว็บเหนืองบประมาณการแสดงผลที่กำหนด (เช่น ประมาณ 2.67 มิลลิวินาทีที่ 48KHz) หากความจุลดลงจนเกือบ 100 เปอร์เซ็นต์ หมายความว่าแอปอาจมีข้อบกพร่องเนื่องจากตัวแสดงผลประมวลผลไม่สำเร็จในงบประมาณที่กำหนด

ใช้ about://tracing

วิธีบันทึกข้อมูลการติดตาม

วิธีการที่เราเขียนด้านล่างนี้มีไว้สำหรับ Chrome 80 ขึ้นไป

ปิดแท็บและหน้าต่างอื่นๆ ทั้งหมด และปิดใช้ส่วนขยายเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด หรือคุณจะเปิดอินสแตนซ์ใหม่ของ Chrome หรือใช้บิลด์อื่นๆ จากเวอร์ชันการเผยแพร่ต่างๆ (เช่น เบต้าหรือ Canary) ก็ได้ เมื่อเตรียมเบราว์เซอร์พร้อมแล้ว ให้ทำตามขั้นตอนด้านล่าง

1. เปิดแอปพลิเคชัน (หน้าเว็บ) ของคุณบนแท็บ
2. เปิดแท็บอื่นแล้วไปที่ about://tracing
3. กดปุ่มบันทึก แล้วเลือกเลือกการตั้งค่าด้วยตนเอง
4. กดปุ่มไม่มีทั้งในส่วนบันทึกหมวดหมู่และปิดใช้โดยหมวดหมู่เริ่มต้น
5. ในส่วนหมวดหมู่ระเบียน ให้เลือกรายการต่อไปนี้
   • audio
   • blink_gc
   • media
   • v8.execute (หากคุณสนใจประสิทธิภาพโค้ด JS ของ AudioWorklet)
   • webaudio
6. ในส่วนปิดใช้ตามหมวดหมู่เริ่มต้น ให้เลือกรายการต่อไปนี้
   • audio-worklet (หากสนใจจุดเริ่มต้นของชุดข้อความ AudioWorklet)
   • webaudio.audionode (หากคุณต้องการการติดตามโดยละเอียดสำหรับแต่ละ AudioNode)
7. กดปุ่มบันทึกที่ด้านล่าง
8. กลับไปที่แท็บแอปพลิเคชันและทำตามขั้นตอนที่ทำให้เกิดปัญหาอีกครั้ง
9. เมื่อมีข้อมูลการติดตามเพียงพอแล้ว ให้กลับไปที่แท็บการติดตามและกดหยุด

10. แท็บการติดตามจะแสดงผลลัพธ์เป็นภาพ

    

11. กดบันทึกเพื่อบันทึกข้อมูลการติดตาม

วิธีวิเคราะห์ข้อมูลการติดตาม

ข้อมูลการติดตามจะแสดงวิธีที่เครื่องมือเสียงในเว็บของ Chrome แสดงผลเสียง โหมดแสดงภาพมีโหมดการแสดงผล 2 โหมด ได้แก่ โหมดระบบปฏิบัติการและโหมดงาน แต่ละโหมดใช้โมเดล Threading ที่แตกต่างกัน ดังนั้นผลการติดตามจึงแตกต่างกันด้วย

โหมดระบบปฏิบัติการ

ในโหมดระบบปฏิบัติการ เทรด AudioOutputDevice จะเรียกใช้โค้ดเสียงในเว็บทั้งหมด AudioOutputDevice เป็นเทรดลำดับความสำคัญแบบเรียลไทม์ที่มีต้นทางมาจากบริการเสียงของเบราว์เซอร์ซึ่งขับเคลื่อนโดยนาฬิกาฮาร์ดแวร์เสียง หากคุณเห็นความผิดปกติจากข้อมูลการติดตามในเลนนี้ หมายความว่าเวลาการเรียกกลับจากอุปกรณ์อาจมีภาพกระตุก เป็นที่ทราบกันดีว่า Linux และ Pulse Audio มีปัญหานี้ ดูรายละเอียดเพิ่มเติมได้จากปัญหา Chromium ต่อไปนี้ #825823, #864463

โหมด Worklet

ในโหมด Worklet ซึ่งมีลักษณะเป็น 1 เทรดข้ามจาก AudioOutputDevice ไปยัง AudioWorklet เทรด คุณควรเห็นการติดตามที่สอดคล้องกันใน 2 ช่องทางของเทรดดังที่แสดงด้านล่าง เมื่อเปิดใช้งานเวิร์กเล็ต การดำเนินการเกี่ยวกับเสียงในเว็บทั้งหมดจะแสดงผลโดยเทรด AudioWorklet เทรดนี้ไม่ใช่ลําดับความสําคัญแบบเรียลไทม์ในขณะนี้ ความผิดปกติที่พบได้ทั่วไปคือบล็อกขนาดใหญ่ที่เกิดจากการรวบรวมขยะหรือแสดงผลไม่ทันกำหนดเวลา ทั้ง 2 กรณีอาจทำให้เกิดข้อบกพร่องในสตรีมเสียง

ในทั้ง 2 กรณี ข้อมูลการติดตามที่เหมาะจะมีลักษณะเป็นการเรียกใช้โค้ดเรียกกลับของอุปกรณ์เสียงที่มีการจัดแนวที่เหมาะสมและแสดงผลงานที่เสร็จสมบูรณ์ภายในงบประมาณการแสดงผลที่กำหนด ภาพหน้าจอ 2 ภาพด้านบนเป็นตัวอย่างที่ดีของข้อมูลการติดตามที่เหมาะสม

การเรียนรู้จากตัวอย่างในโลกแห่งความเป็นจริง

ตัวอย่างที่ 1: แสดงผลงานที่เกินงบประมาณที่แสดงผล

ภาพหน้าจอด้านล่าง (ปัญหา Chromium #796330) เป็นตัวอย่างทั่วไปเมื่อโค้ดใน AudioWorkletProcessor ใช้เวลานานเกินไปและเกินงบประมาณการแสดงผลที่กำหนด เวลาเรียกกลับทำงานได้ดี แต่การเรียกใช้ฟังก์ชันการประมวลผลเสียงของ Web Audio API ดำเนินการไม่สำเร็จก่อนที่จะมีการเรียกกลับของอุปกรณ์ครั้งถัดไป

คุณมีตัวเลือกดังนี้

• ลดปริมาณงานของกราฟเสียงโดยใช้อินสแตนซ์ AudioNode น้อยลง
• ลดภาระงานของโค้ดใน AudioWorkletProcessor
• เพิ่มเวลาในการตอบสนองพื้นฐานของ AudioContext

ตัวอย่างที่ 2: การเก็บขยะจำนวนมากในเธรด Worklet

การเก็บรวบรวมข้อมูลขยะได้รับการจัดการในเทรดเวิร์กเลต ซึ่งต่างจากเทรดการแสดงภาพเสียงของระบบปฏิบัติการ ซึ่งหมายความว่าหากโค้ดมีการจัดสรรหน่วยความจำ/deallocation (เช่น อาร์เรย์ใหม่) ระบบจะทริกเกอร์การรวบรวมขยะซึ่งบล็อกเทรดแบบพร้อมกัน หากภาระงานของการดำเนินการเกี่ยวกับเสียงในเว็บและการรวบรวมขยะมากกว่างบประมาณการแสดงผลที่กำหนด จะทำให้สตรีมเสียงมีข้อบกพร่อง ภาพหน้าจอต่อไปนี้เป็นตัวอย่างที่เห็นได้ชัดของกรณีนี้

คุณมีตัวเลือกดังนี้

• จัดสรรความทรงจำไว้ด้านหน้าและนำกลับมาใช้ใหม่เมื่อเป็นไปได้
• ใช้รูปแบบการออกแบบที่แตกต่างกันตาม SharedArrayBuffer ถึงแม้วิธีนี้จะไม่ใช่โซลูชันที่สมบูรณ์แบบ แต่แอปเสียงบนเว็บหลายแอปใช้รูปแบบที่คล้ายกับ SharedArrayBuffer เพื่อเรียกใช้โค้ดเสียงแบบเข้มข้น ตัวอย่างเช่น
  • รูปแบบการออกแบบ Worklet เสียง

ตัวอย่างที่ 3: การติดต่อกลับของอุปกรณ์เสียงที่มีเสียงรบกวนจาก AudioOutputDevice

ช่วงเวลาที่แม่นยำของโค้ดเรียกกลับของเสียงคือสิ่งที่สำคัญที่สุดสำหรับเสียงในเว็บ เวลานี้ควรเป็นนาฬิกาที่แม่นยําที่สุดในระบบของคุณ หากระบบปฏิบัติการหรือระบบย่อยของเสียงไม่สามารถรับประกันเวลาในการเรียกกลับที่เสถียร การดำเนินการที่ตามมาทั้งหมดจะได้รับผลกระทบ ภาพต่อไปนี้คือตัวอย่างการติดต่อกลับด้วยเสียง ที่มีภาพสั่น เมื่อเปรียบเทียบกับสองภาพก่อนหน้า ช่วงเวลาระหว่างการเรียกกลับแต่ละภาพจะแตกต่างกันอย่างมาก

คุณมีตัวเลือกดังนี้

• เพิ่มขนาดบัฟเฟอร์ของโค้ดเรียกกลับของระบบโดยการปรับตัวเลือก latencyHint
• หากพบปัญหา ให้แจ้งปัญหาใน crbug.com พร้อมข้อมูลการติดตาม

ใช้ส่วนขยาย Web Audio DevTools

นอกจากนี้ คุณยังสามารถใช้ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บที่ออกแบบมาสำหรับ Web Audio API โดยเฉพาะได้ด้วย เครื่องมือการติดตามนี้ต่างจากเครื่องมือการติดตามตรงที่มีการตรวจสอบกราฟและเมตริกประสิทธิภาพแบบเรียลไทม์

ส่วนขยายนี้ต้องติดตั้งจาก Chrome เว็บสโตร์

หลังจากติดตั้งแล้ว คุณจะเข้าถึงแผงนี้ได้โดยการเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และคลิก "Web Audio" ที่เมนูด้านบน

แผง Web Audio มีองค์ประกอบ 4 อย่าง ได้แก่ ตัวเลือกบริบท เครื่องมือตรวจสอบพร็อพเพอร์ตี้ เครื่องมือแสดงข้อมูลเป็นภาพ และตัวตรวจสอบประสิทธิภาพ

ตัวเลือกบริบท

เนื่องจากหน้าเว็บมีออบเจ็กต์ BaseAudioContext ได้หลายรายการ เมนูแบบเลื่อนลงนี้จึงช่วยให้คุณเลือกบริบทที่ต้องการตรวจสอบได้ คุณยังเรียกใช้คอลเล็กชันขยะด้วยตนเองได้โดยคลิกที่ไอคอนถังขยะทางด้านซ้าย

เครื่องมือตรวจสอบคุณสมบัติ

แผงด้านข้างแสดงพร็อพเพอร์ตี้ต่างๆ ของบริบทที่ผู้ใช้เลือกหรือ AudioNode ระบบไม่รองรับการตรวจสอบค่าแบบไดนามิกใน AudioParam

สร้างกราฟ Visualizer

มุมมองนี้จะแสดงโทโพโลยีกราฟปัจจุบันของบริบทที่ผู้ใช้เลือก ซึ่งภาพนี้จะเปลี่ยนแปลงแบบเรียลไทม์ เมื่อคลิกองค์ประกอบในการแสดงภาพ คุณจะตรวจสอบข้อมูลโดยละเอียดของเครื่องมือตรวจสอบที่พักได้

การตรวจสอบประสิทธิภาพ

แถบสถานะด้านล่างจะใช้งานได้เมื่อ BaseAudioContext ที่เลือกไว้เป็น AudioContext ซึ่งทำงานในแบบเรียลไทม์ แถบนี้จะแสดงคุณภาพการสตรีมเสียงทันทีของ AudioContext ที่เลือกและจะอัปเดตทุกวินาที โดยมีข้อมูลต่อไปนี้

• ช่วงการเรียกกลับ (มิลลิวินาที): แสดงค่าเฉลี่ย/ความแปรปรวนแบบถ่วงน้ำหนักของช่วงเวลาการโทรกลับ โดยหลักการแล้ว ค่าเฉลี่ยควรคงที่และความแปรปรวนควรใกล้เคียง 0 หากคุณเห็นค่าความแปรปรวนมาก แสดงว่าฟังก์ชันการเรียกกลับของเสียงระดับระบบมีเวลาที่ไม่เสถียรซึ่งอาจทำให้สตรีมเสียงมีคุณภาพไม่ดี (ดูตัวอย่าง 3 ด้านบน)

• ความจุในการแสดงผล (เปอร์เซ็นต์): เมื่อความจุเข้าใกล้ 100 เปอร์เซ็นต์ หมายความว่าตัวแสดงผลทำงานมากเกินไปสำหรับงบประมาณการแสดงผลที่กำหนด คุณจึงควรพิจารณาดำเนินการน้อยลง (เช่น ใช้ออบเจ็กต์ AudioNodes ในกราฟให้น้อยลง)

คุณเรียกใช้โปรแกรมเก็บขยะได้ด้วยตนเองโดยคลิกไอคอนถังขยะ

แผงเครื่องมือสำหรับนักพัฒนาเว็บในรุ่นเดิม

ตอนนี้ทีม Chrome Web Audio แนะนำให้ใช้ส่วนขยายนี้ แต่ยังใช้แผง WebAudio DevTools เดิมได้ด้วย คุณเข้าถึงแผงนี้ได้โดยคลิกเมนู "จุด 3 จุด" ที่มุมขวาบนของเครื่องมือสำหรับนักพัฒนาเว็บ แล้วไปที่เครื่องมือเพิ่มเติม จากนั้นคลิก WebAudio

บทสรุป

การแก้ไขข้อบกพร่องของเสียงทำได้ยาก การแก้ไขข้อบกพร่องของเสียงในเบราว์เซอร์เป็นเรื่องที่ยากยิ่งขึ้น อย่างไรก็ตาม เครื่องมือเหล่านี้จะช่วยบรรเทาความเจ็บปวดโดยการให้ข้อมูลเชิงลึกที่เป็นประโยชน์เกี่ยวกับประสิทธิภาพของโค้ดเสียงในเว็บ แต่ในบางกรณีคุณอาจพบปัญหาใน Chrome หรือส่วนขยายดังกล่าว อย่ากลัวที่จะรายงานข้อบกพร่องใน crbug.com หรือเครื่องมือติดตามปัญหาเกี่ยวกับส่วนขยาย

รูปภาพโดย Jonathan Velasquez ใน Unsplash