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

ดูวิธีสร้างโปรไฟล์ประสิทธิภาพของแอป Web Audio ใน Chrome โดยใช้ about://tracing และ Audion (ส่วนขยาย WebAudio ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome)

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

ดูวิธีรับข้อมูลที่เกี่ยวข้องเพื่อให้เราเข้าใจปัญหาและแก้ไขปัญหาที่ต้นเหตุได้ในที่สุด

เครื่องมือสร้างโปรไฟล์ Web Audio

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

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

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

• ช่วงเวลาที่ใช้โดยการเรียกฟังก์ชันที่เฉพาะเจาะจงในเธรดต่างๆ
• เวลาโทรกลับด้วยเสียงในมุมมองไทม์ไลน์

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

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

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

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

ใช้ about://tracing

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

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

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

    

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

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

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

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

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

ดูรายละเอียดเพิ่มเติมได้ที่ปัญหา Chromium ต่อไปนี้ #825823 #864463

โหมด Worklet

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

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

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

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

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

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

ตัวเลือกของคุณ

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

ตัวอย่างที่ 2: ระบบจัดการหน่วยความจำที่ไม่ใช้แล้วจำนวนมากในเธรด Worklet

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

ตัวเลือกของคุณ

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

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

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

ตัวเลือกของคุณ

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

ใช้ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บของ Web Audio

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

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

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

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

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

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

เครื่องมือตรวจสอบออบเจ็กต์

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

Graph Visualizer

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

เครื่องมือตรวจสอบประสิทธิภาพ

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

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

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

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

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

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

บทสรุป

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