about://tracing 및 Audion (Chrome DevTools의 WebAudio 확장 프로그램)을 사용하여 Chrome에서 웹 오디오 앱의 성능을 프로파일링하는 방법을 알아보세요.
이 도움말은 Web Audio API를 사용하는 앱을 개발하고 있고 출력에서 펑 소리가 나는 등 예기치 않은 문제가 발생했거나 예기치 않은 소리가 들리기 때문일 수 있습니다. 이미 crbug.com 토론에 참여하고 있고 Chrome 엔지니어가 '추적 데이터'를 업로드하거나 그래프 시각화를 살펴보도록 요청했을 수 있습니다. 이 문서에서는 문제를 파악하고 궁극적으로 근본적인 문제를 해결할 수 있도록 관련 정보를 얻는 방법을 보여줍니다.
웹 오디오 프로파일링 도구
Chrome DevTools에서 웹 오디오, about://tracing 및 WebAudio 확장 프로그램을 프로파일링할 때 도움이 되는 두 가지 도구가 있습니다.
언제 about://tracing 서비스를 사용하시나요?
알 수 없는 '결함'이 발생할 때 추적 도구로 앱을 프로파일링하면 다음에 대한 유용한 정보를 확인할 수 있습니다.
- 여러 스레드에서 특정 함수 호출에 소요된 시간 구획
- 타임라인 뷰의 오디오 콜백 타이밍
일반적으로 오디오 콜백 기한 누락 또는 예기치 않은 오디오 결함을 일으킬 수 있는 대규모 가비지 컬렉션을 표시합니다. 이 정보는 근본적인 문제를 이해하는 데 유용하므로 Chromium 엔지니어는 특히 로컬 재현이 불가능한 경우 이 정보를 묻습니다. 추적에 관한 일반적인 안내는 여기에서 확인할 수 있습니다.
언제 Web Audio DevTools 확장 프로그램을 사용하나요?
오디오 그래프를 시각화하고 오디오 렌더기의 성능을 실시간으로 모니터링하려는 경우 오디오 스트림을 생성하고 합성하기 위한 AudioNode 객체의 네트워크인 오디오 그래프는 복잡해지는 경우가 많지만 그래프 토폴로지는 설계상 불투명합니다. Web Audio API에는 노드/그래프 검사 기능이 없습니다. 그래프에서 일부 변경사항이 발생했는데 이제 무음이 들립니다. 이제 청취를 통해 디버깅할 차례입니다. 이것은 결코 쉬운 일이 아니며, 오디오 그래프가 클수록 더 어려워집니다. Web Audio DevTools 확장 프로그램을 사용하면 그래프를 시각화할 수 있습니다.
이 확장 프로그램을 사용하면 주어진 렌더링 예산(예: 48KHz에서 약 2.67ms)에 대한 웹 오디오 렌더러의 성능을 나타내는 실행 중인 렌더링 용량의 추정치를 모니터링할 수 있습니다. 용량이 100%에 가까워지면 렌더러가 주어진 예산으로 작업을 완료하지 못하여 앱에 문제가 발생할 수 있습니다.
about://tracing 사용
추적 데이터를 캡처하는 방법
아래에 작성된 안내는 Chrome 80 이상에 적용됩니다.
최상의 결과를 얻으려면 다른 탭과 창을 모두 닫고 확장 프로그램을 사용 중지하세요. 또는 Chrome의 새 인스턴스를 실행하거나 다른 출시 채널 (예: 베타 또는 카나리아)의 다른 빌드를 사용할 수 있습니다. 브라우저가 준비되면 다음 단계를 따르세요.
- 탭에서 애플리케이션 (웹페이지)을 엽니다.
- 다른 탭을 열고
about://tracing(으)로 이동합니다. - Record 버튼을 누르고 수동으로 설정 선택을 선택합니다.
- Record Categories 및 Disabled by Default Categories 섹션에서 None 버튼을 누릅니다.
- Record Categories 섹션에서 다음을 선택합니다.
audioblink_gcmediav8.execute(AudioWorkletJS 코드 성능에 관심이 있는 경우)webaudio
- 기본 카테고리로 사용 중지됨 섹션에서 다음을 선택합니다.
audio-worklet(AudioWorklet스레드가 시작되는 위치에 관심이 있는 경우)webaudio.audionode(각AudioNode의 자세한 trace가 필요한 경우)
- 하단의 녹화 버튼을 누릅니다.
- 애플리케이션 탭으로 돌아가서 문제가 발생한 단계를 다시 실행합니다.
- 트레이스 데이터가 충분하면 추적 탭으로 돌아가서 중지를 누릅니다.
추적 탭에는 결과가 시각화됩니다.
저장을 눌러 추적 데이터를 저장합니다.
추적 데이터를 분석하는 방법
추적 데이터는 Chrome의 웹 오디오 엔진이 오디오를 렌더링하는 방식을 시각화합니다. 렌더기에는 운영체제 모드와 Worklet 모드, 이렇게 두 가지 렌더링 모드가 있습니다. 모드마다 다른 스레딩 모델을 사용하므로 추적 결과도 다릅니다.
운영체제 모드
운영체제 모드에서 AudioOutputDevice 스레드는 모든 웹 오디오 코드를 실행합니다. AudioOutputDevice는 브라우저의 오디오 서비스에서 발생하는 실시간 우선순위 스레드로, 오디오 하드웨어 클록에 의해 구동됩니다. 이 레인의 트레이스 데이터에 불규칙한 부분이 있으면 기기의 콜백 타이밍이 불안정할 수 있습니다. Linux와 Pulse Audio의 조합에 이 문제가 있는 것으로 알려져 있습니다. 자세한 내용은 다음 Chromium 문제를 참고하세요. #825823,
#864463
Worklet 모드
AudioOutputDevice에서 AudioWorklet 스레드로의 스레드가 한 번 이동하는 것이 특징인 Worklet 모드에서는 아래와 같이 두 스레드 레인에 잘 정렬된 트레이스가 표시됩니다. Worklet이 활성화되면 모든 웹 오디오 작업이 AudioWorklet 스레드에 의해 렌더링됩니다. 이 스레드는 현재 실시간 우선순위 스레드가 아닙니다.
여기서 흔히 발생하는 불규칙성은 가비지 컬렉션이나 렌더링 기한 누락으로 인한 큰 장애입니다. 두 경우 모두 오디오 스트림에 문제가 발생합니다.
두 경우 모두 이상적인 추적 데이터는 잘 정렬된 오디오 기기 콜백 호출과 지정된 렌더링 예산 내에서 잘 완료되는 렌더링 작업이 특징입니다. 위의 두 스크린샷은 이상적인 추적 데이터의 좋은 예입니다.
실제 사례를 통한 학습
예 1: 렌더링 예산을 초과하는 렌더링 작업
아래 스크린샷 (Chromium 문제 #796330)은 AudioWorkletProcessor의 코드가 너무 오래 걸려 주어진 렌더링 예산을 초과하는 경우를 보여주는 일반적인 예입니다. 콜백 타이밍은 정상적으로 작동하지만 Web Audio API의 오디오 처리 함수 호출이 다음 기기 콜백 전에 작업을 완료하지 못했습니다.
옵션:
- 더 적은
AudioNode인스턴스를 사용하여 오디오 그래프의 워크로드를 줄입니다. AudioWorkletProcessor에서 코드의 워크로드를 줄입니다.AudioContext의 기본 지연 시간을 늘립니다.
예시 2: Worklet 스레드에서 상당한 가비지 컬렉션
운영체제 오디오 렌더링 스레드에서와 달리 가비지 컬렉션은 Worklet 스레드에서 관리됩니다. 즉, 코드가 메모리 할당/할당 해제(예: 새 배열)를 수행하면 결국 스레드를 동기식으로 차단하는 가비지 컬렉션을 트리거합니다. 웹 오디오 작업 및 가비지 컬렉션의 워크로드가 지정된 렌더링 예산보다 크면 오디오 스트림에 문제가 발생합니다. 다음 스크린샷은 이 경우의 극단적인 예입니다.
옵션:
- 메모리를 미리 할당하고 가능한 경우 다시 사용합니다.
SharedArrayBuffer에 따라 다른 디자인 패턴을 사용합니다. 완벽한 솔루션은 아니지만 일부 웹 오디오 앱에서는SharedArrayBuffer와 유사한 패턴을 사용하여 집약적인 오디오 코드를 실행합니다. 예를 들면 다음과 같습니다.
예 3: AudioOutputDevice의 잡음 오디오 기기 콜백
오디오 콜백의 정확한 타이밍은 웹 오디오에서 가장 중요합니다. 시스템에서 가장 정확한 시계여야 합니다. 운영체제 또는 오디오 하위 시스템에서 견고한 콜백 타이밍을 보장할 수 없는 경우 모든 후속 작업이 영향을 받습니다. 다음 이미지는 잡음이 발생하는 오디오 콜백의 예입니다. 앞의 두 이미지와 비교할 때 각 콜백 간의 간격은 크게 다릅니다.
옵션:
latencyHint옵션을 조정하여 시스템 오디오 콜백 버퍼 크기를 늘립니다.- 문제가 발생하면 crbug.com에서 추적 데이터와 함께 문제를 신고하세요.
Web Audio DevTools 확장 프로그램 사용
Web Audio API용으로 특별히 설계된 DevTools 확장 프로그램을 사용할 수도 있습니다. 추적 도구와 달리 이 도구는 그래프와 성능 측정항목을 실시간으로 검사합니다.
이 확장 프로그램은 Chrome 웹 스토어에서 설치해야 합니다.
설치 후 Chrome DevTools를 열고 상단 메뉴에서 '웹 오디오'를 클릭하여 패널에 액세스합니다.
웹 오디오 패널에는 컨텍스트 선택기, 속성 검사기, 그래프 시각화 도구, 성능 모니터라는 4가지 구성요소가 있습니다.
컨텍스트 선택기
한 페이지에 여러 BaseAudioContext 객체가 있을 수 있으므로 이 드롭다운 메뉴를 사용하여 검사할 컨텍스트를 선택할 수 있습니다. 왼쪽의 휴지통 아이콘을 클릭하여 가비지 컬렉션을 수동으로 트리거할 수도 있습니다.
속성 검사기
측면 패널에는 사용자가 선택한 컨텍스트 또는 AudioNode의 다양한 속성이 표시됩니다. AudioParam에서는 동적 값 검사가 지원되지 않습니다.
그래프 비주얼라이저
이 뷰는 사용자가 선택한 컨텍스트의 현재 그래프 토폴로지를 렌더링합니다. 이러한 시각화는 실시간으로 동적으로 변경됩니다. 시각화에서 요소를 클릭하면 속성 검사기에서 세부정보를 검사할 수 있습니다.
성능 모니터링
하단의 상태 표시줄은 선택된 BaseAudioContext가 실시간으로 실행되는 AudioContext일 때만 활성화됩니다. 이 막대는 선택한 AudioContext의 즉각적인 오디오 스트림 품질을 보여주며 1초마다 업데이트됩니다. 다음 정보를 제공합니다.
콜백 간격 (밀리초): 콜백 간격의 가중 평균/분산을 표시합니다. 이상적으로는 평균이 안정적이고 분산이 0에 가까워야 합니다. 편차가 크면 시스템 수준 오디오 콜백 함수의 타이밍이 불안정하여 오디오 스트림 품질이 저하될 수 있다는 의미입니다. (위의 예시 3 참고)
렌더링 용량(백분율): 용량이 100%에 가까워지면 렌더러가 주어진 렌더링 예산으로 너무 많은 작업을 실행하고 있음을 의미합니다. 따라서 그래프에서
AudioNodes객체를 더 적게 사용하는 등 더 적은 작업을 고려해야 합니다.
휴지통 아이콘을 클릭하여 가비지 컬렉터를 수동으로 트리거할 수 있습니다.
기존 WebAudio DevTools 패널
이 확장 프로그램은 현재 Chrome 웹 오디오팀에서 권장하는 방법이지만 기존 WebAudio DevTools 패널도 사용할 수 있습니다. DevTools의 오른쪽 상단에 있는 '점 3개' 메뉴를 클릭한 후 도구 더보기, WebAudio로 이동하여 이 패널에 액세스할 수 있습니다.
결론
오디오 디버깅은 어렵습니다. 브라우저에서 오디오를 디버깅하기가 훨씬 더 어렵습니다. 그러나 이러한 도구는 웹 오디오 코드의 성능에 대한 유용한 정보를 제공하여 이러한 어려움을 덜어줄 수 있습니다. 하지만 경우에 따라 Chrome 또는 확장 프로그램에서 문제가 발생할 수도 있습니다. 그런 다음 주저하지 말고 crbug.com 또는 확장 프로그램 Issue Tracker에서 버그를 신고하세요.
사진: Jonathan Velasquez, Unsplash 제공