Tìm hiểu cách phân tích hiệu suất của các ứng dụng Web Audio trong Chrome bằng about://tracing và Audion (một tiện ích WebAudio trong Công cụ của Chrome cho nhà phát triển).
Có thể bạn đã tìm đến bài viết này vì đang phát triển một ứng dụng sử dụng API Web Audio và gặp phải các sự cố không mong muốn như tiếng ồn phát ra từ đầu ra hoặc bạn nghe thấy điều gì đó không mong muốn. Có thể bạn đã tham gia vào một cuộc thảo luận trên crbug.com và một kỹ sư của Chrome đã yêu cầu bạn tải "dữ liệu theo dõi" lên hoặc xem hình ảnh trực quan của biểu đồ. Bài viết này cho biết cách lấy thông tin liên quan để chúng ta có thể hiểu được vấn đề và cuối cùng khắc phục được vấn đề cơ bản.
Công cụ phân tích tài nguyên Web Audio
Có hai công cụ sẽ giúp bạn khi phân tích tài nguyên Âm thanh trên web, đó là about://tracing và tiện ích WebAudio trong Công cụ của Chrome cho nhà phát triển.
Khi nào bạn nên sử dụng about://tracing?
Khi xảy ra "lỗi" bí ẩn. Việc phân tích ứng dụng bằng các công cụ theo dõi sẽ cung cấp cho bạn thông tin chi tiết về:
- Thời lượng của các lát cắt do các lệnh gọi hàm cụ thể thực hiện trên các luồng khác nhau
- Thời gian gọi lại âm thanh trong chế độ xem theo dòng thời gian
Thông báo này thường cho biết các thời hạn gọi lại âm thanh bị nhỡ hoặc hoạt động thu thập rác lớn có thể gây ra sự cố âm thanh ngoài dự kiến. Thông tin này hữu ích để hiểu rõ vấn đề cơ bản, vì vậy, các kỹ sư Chromium thường sẽ yêu cầu thông tin này, đặc biệt là khi không thể tái hiện cục bộ. Bạn có thể xem hướng dẫn chung về tính năng theo dõi tại đây.
Khi nào bạn sử dụng tiện ích Web Audio DevTools?
Khi bạn muốn trực quan hoá biểu đồ âm thanh và theo dõi cách trình kết xuất âm thanh hoạt động theo thời gian thực. Biểu đồ âm thanh, một mạng lưới các đối tượng AudioNode để tạo và tổng hợp luồng âm thanh, thường trở nên phức tạp nhưng cấu trúc đồ thị lại không rõ ràng. (API Âm thanh trên web không có tính năng tự xem xét nút/biểu đồ.) Một số thay đổi xảy ra trong biểu đồ và giờ đây bạn sẽ nghe thấy âm thanh tĩnh. Sau đó, bạn có thể gỡ lỗi bằng cách nghe. Việc này không bao giờ dễ dàng và sẽ trở nên khó khăn hơn khi bạn có biểu đồ âm thanh lớn hơn. Tiện ích Web Audio DevTools có thể giúp bạn bằng cách trực quan hoá biểu đồ.
Với tiện ích này, bạn có thể theo dõi ước tính đang chạy về dung lượng kết xuất, cho biết cách trình kết xuất âm thanh trên web hoạt động trong một ngân sách kết xuất nhất định (ví dụ: khoảng 2,67 mili giây ở 48 KHz). Nếu dung lượng gần đạt 100%, thì điều đó có nghĩa là ứng dụng của bạn có thể gặp sự cố vì trình kết xuất không hoàn tất được công việc trong ngân sách đã cho.
Sử dụng about://tracing
Cách ghi lại dữ liệu theo dõi
Hướng dẫn dưới đây dành cho Chrome 80 trở lên.
Để có kết quả tốt nhất, hãy đóng tất cả các thẻ và cửa sổ khác cũng như tắt các tiện ích. Ngoài ra, bạn có thể chạy một phiên bản mới của Chrome hoặc sử dụng các bản dựng khác từ các kênh phát hành khác nhau (ví dụ: Beta hoặc Canary). Sau khi bạn đã sẵn sàng sử dụng trình duyệt, hãy làm theo các bước dưới đây:
- Mở ứng dụng (trang web) trên một thẻ.
- Mở một thẻ khác rồi chuyển đến
about://tracing. - Nhấn nút Record (Quay) rồi chọn Manually select settings (Chọn chế độ cài đặt theo cách thủ công).
- Nhấn vào nút Không có ở cả phần Danh mục bản ghi và phần Tắt theo danh mục mặc định.
- Trong mục Record Categories (Danh mục bản ghi), hãy chọn những mục sau:
audioblink_gcmediav8.execute(nếu bạn quan tâm đến hiệu suất của mã JSAudioWorklet)webaudio
- Trong mục Danh mục bị tắt theo mặc định, hãy chọn những mục sau:
audio-worklet(nếu bạn quan tâm đến vị trí bắt đầu của luồngAudioWorklet)webaudio.audionode(nếu bạn cần dấu vết chi tiết cho mỗiAudioNode)
- Nhấn vào nút Record (Ghi) ở dưới cùng.
- Quay lại thẻ ứng dụng và làm lại các bước đã kích hoạt vấn đề.
- Khi bạn có đủ dữ liệu theo dõi, hãy quay lại thẻ theo dõi và nhấn Dừng.
Thẻ theo dõi sẽ hiển thị kết quả.
Nhấn Lưu để lưu dữ liệu theo dõi.
Cách phân tích dữ liệu theo dõi
Dữ liệu theo dõi trực quan hoá cách công cụ âm thanh trên web của Chrome hiển thị âm thanh. Trình kết xuất có hai chế độ kết xuất khác nhau: Chế độ hệ điều hành và Chế độ Worklet. Mỗi chế độ sử dụng một mô hình tạo luồng khác nhau, vì vậy, kết quả theo dõi cũng khác nhau.
Chế độ hệ điều hành
Ở chế độ hệ điều hành, luồng AudioOutputDevice sẽ chạy tất cả mã âm thanh trên web. AudioOutputDevice là một luồng ưu tiên theo thời gian thực bắt nguồn từ Dịch vụ âm thanh của trình duyệt, được điều khiển bằng đồng hồ phần cứng âm thanh. Nếu bạn thấy dữ liệu theo dõi không đều trong làn này, điều đó có nghĩa là thời gian gọi lại từ thiết bị có thể bị giật. Sự kết hợp giữa Linux và Pulse Audio được biết là có vấn đề này. Hãy xem các vấn đề sau đây về Chromium để biết thêm chi tiết: #825823, #864463.
Chế độ Worklet
Trong Chế độ Worklet, được đặc trưng bằng một lượt chuyển đổi luồng từ AudioOutputDevice sang luồng AudioWorklet, bạn sẽ thấy các dấu vết được căn chỉnh tốt trong hai làn luồng như minh hoạ dưới đây. Khi
worklet được kích hoạt, tất cả các thao tác âm thanh trên web sẽ được luồng
AudioWorklet hiển thị. Luồng này hiện không phải là luồng ưu tiên theo thời gian thực.
Sự bất thường phổ biến ở đây là một khối lớn do quá trình thu thập rác hoặc bỏ lỡ thời hạn kết xuất. Cả hai trường hợp đều dẫn đến sự cố trong luồng âm thanh.
Trong cả hai trường hợp, dữ liệu theo dõi lý tưởng được đặc trưng bởi các lệnh gọi lại thiết bị âm thanh được căn chỉnh tốt và các tác vụ kết xuất được hoàn thành tốt trong phạm vi ngân sách kết xuất đã cho. Hai ảnh chụp màn hình ở trên là ví dụ tuyệt vời về dữ liệu theo dõi lý tưởng.
Tìm hiểu từ các ví dụ thực tế
Ví dụ 1: Các tác vụ kết xuất vượt quá ngân sách kết xuất
Ảnh chụp màn hình bên dưới (Vấn đề về Chromium #796330) là một ví dụ điển hình về trường hợp mã trong AudioWorkletProcessor mất quá nhiều thời gian và vượt quá ngân sách kết xuất nhất định. Thời gian gọi lại hoạt động tốt nhưng lệnh gọi hàm xử lý âm thanh của API Âm thanh trên web không hoàn tất được công việc trước lệnh gọi lại thiết bị tiếp theo.
Các lựa chọn của bạn:
- Giảm khối lượng công việc của biểu đồ âm thanh bằng cách sử dụng ít thực thể
AudioNodehơn. - Giảm khối lượng công việc của mã trong
AudioWorkletProcessor. - Tăng độ trễ cơ sở của
AudioContext.
Ví dụ 2: Thu gom rác đáng kể trên luồng worklet
Không giống như luồng kết xuất âm thanh của hệ điều hành, việc thu gom rác được quản lý trên luồng công việc. Điều đó có nghĩa là nếu mã của bạn phân bổ/giải phóng bộ nhớ (ví dụ: mảng mới), thì cuối cùng mã đó sẽ kích hoạt một hoạt động thu thập rác chặn đồng bộ luồng. Nếu khối lượng công việc của các hoạt động âm thanh trên web và việc thu gom rác lớn hơn ngân sách kết xuất nhất định, thì điều này sẽ dẫn đến sự cố trong luồng âm thanh. Ảnh chụp màn hình sau đây là một ví dụ cực đoan về trường hợp này.
Các lựa chọn của bạn:
- Phân bổ bộ nhớ trước và sử dụng lại bộ nhớ đó bất cứ khi nào có thể.
- Sử dụng nhiều mẫu thiết kế dựa trên
SharedArrayBuffer. Mặc dù đây không phải là giải pháp hoàn hảo, nhưng một số ứng dụng âm thanh trên web sử dụng mẫu tương tự vớiSharedArrayBufferđể chạy mã âm thanh chuyên sâu. Ví dụ:
Ví dụ 3: Lệnh gọi lại thiết bị âm thanh bị giật từ AudioOutputDevice
Thời gian chính xác của lệnh gọi lại âm thanh là điều quan trọng nhất đối với âm thanh trên web. Đây là đồng hồ chính xác nhất trong hệ thống. Nếu hệ điều hành hoặc hệ thống con âm thanh của hệ điều hành không thể đảm bảo thời gian gọi lại ổn định, thì tất cả các thao tác tiếp theo sẽ bị ảnh hưởng. Hình ảnh sau đây là ví dụ về lệnh gọi lại âm thanh bị giật. So với hai hình ảnh trước, khoảng thời gian giữa mỗi lệnh gọi lại thay đổi đáng kể.
Các lựa chọn của bạn:
- Tăng kích thước vùng đệm lệnh gọi lại âm thanh hệ thống bằng cách điều chỉnh tuỳ chọn
latencyHint. - Nếu bạn phát hiện vấn đề, hãy báo cáo vấn đề trên crbug.com kèm theo dữ liệu theo dõi.
Sử dụng tiện ích Công cụ của Chrome cho nhà phát triển Web Audio
Bạn cũng có thể sử dụng tiện ích DevTools được thiết kế riêng cho API Âm thanh trên web. Không giống như công cụ theo dõi, công cụ này cung cấp tính năng kiểm tra theo thời gian thực đối với biểu đồ và các chỉ số hiệu suất.
Bạn cần cài đặt tiện ích này từ Cửa hàng Chrome trực tuyến.
Sau khi cài đặt, bạn có thể truy cập vào bảng điều khiển bằng cách mở Công cụ của Chrome cho nhà phát triển rồi nhấp vào "Web Audio" (Âm thanh trên web) trên trình đơn trên cùng.
Bảng điều khiển Âm thanh trên web có 4 thành phần: bộ chọn ngữ cảnh, trình kiểm tra thuộc tính, trình trực quan hoá biểu đồ và trình giám sát hiệu suất.
Bộ chọn ngữ cảnh
Vì một trang có thể có nhiều đối tượng BaseAudioContext, nên trình đơn thả xuống này cho phép bạn chọn ngữ cảnh mà bạn muốn kiểm tra. Bạn cũng có thể kích hoạt tính năng thu gom rác theo cách thủ công bằng cách nhấp vào biểu tượng thùng rác ở bên trái.
Trình kiểm tra thuộc tính
Bảng điều khiển bên hiển thị nhiều thuộc tính của ngữ cảnh do người dùng chọn hoặc AudioNode. Không hỗ trợ việc kiểm tra các giá trị động trong AudioParam.
Trình trực quan hoá biểu đồ
Thành phần hiển thị này hiển thị cấu trúc liên kết biểu đồ hiện tại của ngữ cảnh do người dùng chọn. Hình ảnh này sẽ thay đổi linh hoạt theo thời gian thực. Bằng cách nhấp vào một phần tử trong hình ảnh trực quan, bạn có thể kiểm tra thông tin chi tiết trên trình kiểm tra thuộc tính.
Trình giám sát hiệu suất
Thanh trạng thái ở dưới cùng chỉ hoạt động khi BaseAudioContext đã chọn là AudioContext chạy theo thời gian thực. Thanh này cho biết chất lượng luồng âm thanh tức thì của một AudioContext đã chọn và được cập nhật mỗi giây. Tệp này cung cấp các thông tin sau:
Khoảng thời gian gọi lại (ms): Hiển thị trung bình/hệ số biến thiên gia quyền của khoảng thời gian gọi lại. Lý tưởng nhất là giá trị trung bình phải ổn định và phương sai phải gần bằng 0. Nếu bạn thấy độ lệch lớn, tức là hàm gọi lại âm thanh cấp hệ thống có thời gian không ổn định, điều này có thể dẫn đến chất lượng luồng âm thanh kém. (Xem ví dụ 3 ở trên.)
Dung lượng kết xuất (phần trăm): Khi dung lượng gần đạt 100 phần trăm, điều này có nghĩa là trình kết xuất đang làm quá nhiều việc cho một ngân sách kết xuất nhất định, vì vậy, bạn nên cân nhắc làm ít hơn (ví dụ: sử dụng ít đối tượng
AudioNodeshơn trong biểu đồ).
Bạn có thể kích hoạt trình thu gom rác theo cách thủ công bằng cách nhấp vào biểu tượng thùng rác.
Bảng điều khiển Công cụ dành cho nhà phát triển WebAudio cũ
Tiện ích này hiện là phương pháp được nhóm Chrome Web Audio đề xuất, nhưng bảng điều khiển WebAudio DevTools cũ cũng có sẵn. Bạn có thể truy cập vào bảng điều khiển này bằng cách nhấp vào trình đơn "ba dấu chấm" ở góc trên cùng bên phải của Công cụ dành cho nhà phát triển, sau đó chuyển đến Công cụ khác, rồi chuyển đến WebAudio.
Kết luận
Khó gỡ lỗi âm thanh. Việc gỡ lỗi âm thanh trong trình duyệt còn khó khăn hơn. Tuy nhiên, các công cụ này có thể giúp bạn giải quyết vấn đề bằng cách cung cấp thông tin chi tiết hữu ích về cách hoạt động của mã âm thanh trên web. Tuy nhiên, trong một số trường hợp, bạn có thể gặp vấn đề trong Chrome hoặc tiện ích. Sau đó, đừng ngại báo cáo lỗi trên crbug.com hoặc trên công cụ theo dõi lỗi của tiện ích.
Ảnh chụp của Jonathan Velasquez trên Unsplash